shzg_projectManage/src/views/index.vue

<template>
  <div class="dashboard app-container">
    <el-row :gutter="24">
      <el-col :span="12">
        <div class="inOrOutBox" style="background-color: #FDF6E3;">
          <div class="inOrOutBox_left">
            <div style="font-size: 20px; font-weight:bold; color:#333333; ">月入库统计</div>
            <div class="itemBox">
              <div>
                <p style="font-size: 14px;color:#606266">项目数 </p>
                <p style="font-size: 20px; font-weight:500; ">{{ countObj.monthInCount }} </p>
              </div>
              <div>
                <p style="font-size: 14px;color:#606266 ">条目数 </p>
                <p style="font-size: 20px;font-weight:500;">{{ countObj.monthInProjectCount }} </p>
              </div>
              <div>
                <p style="font-size: 14px; color:#606266">总金额 </p>
                <p style="font-size: 20px; font-weight:500;">{{ countObj.monthInAmount }} </p>
              </div>
            </div>
          </div>
          <div class="inOrOutBox_icon">
            <img src="../assets/images/inbound.png" alt="">
          </div>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="inOrOutBox" style="background-color: #EBF5FF;">
          <div class="inOrOutBox_left">
            <div style="font-size: 20px; font-weight:bold;color:#333333 ">月出库统计</div>
            <div class="itemBox">
              <div>
                <p style="font-size: 14px;color:#606266 ">项目数 </p>
                <p style="font-size: 20px;font-weight:500; ">{{ countObj.monthOutCount }} </p>
              </div>
              <div>
                <p style="font-size: 14px; color:#606266">条目数 </p>
                <p style="font-size: 20px; font-weight:500;">{{ countObj.monthOutProjectCount }} </p>
              </div>
              <div>
                <p style="font-size: 14px; color:#606266">总金额 </p>
                <p style="font-size: 20px; font-weight:500;">{{ countObj.monthOutAmount }} </p>
              </div>
            </div>
          </div>
          <div class="inOrOutBox_icon">
            <img src="../assets/images/outbound.png" alt="">

          </div>
        </div>
      </el-col>

    </el-row>

    <el-row :gutter="24" style="margin-top: 20px;">

      <el-col :span="8">
        <div class="main">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>预警信息</div>
            </div>
          </div>
          <el-row :gutter="24" style="margin-top: 25px;height: 100%;">
            <el-col :span="24">
              <div style="height: 100%;width: 100%;" id="inventoryAgeEchatrs"></div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="main">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name" style="display: flex;align-items: center;justify-content: space-between;flex: 1;">
              <div>库龄统计</div>
              <el-icon style="cursor: pointer;" @click="downloadExcel">
                <Download />
              </el-icon>
            </div>
          </div>
          <el-row :gutter="24" style="margin-top: 25px;height: 100%;">
            <el-col :span="24">
              <div style="height: 100%;width: 100%;" id="warningEchatrs"></div>
            </el-col>
            <!-- <el-col :span="12">
              <div style="height: 100%;width: 100%;" id="warningEchatrs2"></div>
            </el-col> -->
            <!-- <el-col :span="6">
              <div class="warningBox">
                <div>库存预警</div>
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 14px;">
                  <div style="margin-right: 14px;">29</div>
                  <el-icon color="#F87777" size="48" style=""><WarningFilled /></el-icon>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="warningBox">
                <div>库存预警</div>
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 14px;">
                  <div style="margin-right: 14px;">29</div>
                  <el-icon color="#F87777" size="48" style=""><WarningFilled /></el-icon>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="warningBox">
                <div>库存预警</div>
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 14px;">
                  <div style="margin-right: 14px;">29</div>
                  <el-icon color="#F87777" size="48" style=""><WarningFilled /></el-icon>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="warningBox">
                <div>库存预警</div>
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 14px;">
                  <div style="margin-right: 14px;">29</div>
                  <el-icon color="#F87777" size="48" style=""><WarningFilled /></el-icon>
                </div>
              </div>
            </el-col> -->
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="main">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>待办事项</div>
            </div>
          </div>
          <div style="display: flex;justify-content: space-between;align-items: center;flex-direction: column;">
            <!-- <div class="main_box">
              <div style="font-size: 32px; font-family: PingFang SC-Medium;">9999</div>
              <div style="margin-top: 16px; font-family: PingFang SC-Regular;">待入库</div>
            </div>
            <div class="main_box">
              <div style="font-size: 32px; font-family: PingFang SC-Medium;">9999</div>
              <div style="margin-top: 16px; font-family: PingFang SC-Regular;">待盘点</div>
            </div> -->
            <el-table :data="waitTableData" :header-row-style="handleCellStyle" style="margin-top: 20px;">
              <el-table-column prop="type" label="类型" width="150" align="center">
                <template #default="scope">
                  <span style="color:#ee6666;font-weight: 550;">{{ scope.row.type }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="situation" label="情况" /> -->
              <el-table-column prop="projectCnt" label="项目数" align="center" />
              <el-table-column prop="totalAmt" label="总金额" align="center" />
              <el-table-column prop="totalQty" label="总数量" align="center" />
            </el-table>
          </div>
        </div>
      </el-col>

    </el-row>


    <el-row :gutter="24" style="height: 400px;margin-top: 20px;">
      <el-col :span="12">
        <div class="echartsMain">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>仓库使用率</div>
            </div>
          </div>
          <div class="echartsBox" id="echartsInventoryReview"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="echartsMain">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>当前入库类型统计</div>
            </div>
          </div>
          <div class="echartsBox" id="echartsInStorage"></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="24" style="margin-top: 20px;">
      <el-col :span="12">
        <div class="echartsMain">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>物资类型统计</div>
            </div>
          </div>
          <div class="echartsBox" id="echartsGoodsType"></div>
        </div>
      </el-col>
      <el-col :span="12" style="height: 400px;">
        <div class="echartsMain">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>通知与公告</div>
              <!-- <el-date-picker
                v-model="dateDailyInventoryObj"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                style="margin: 0 20px;"
              /> -->

            </div>
          </div>
          <div class="echartsBox" style="overflow-y: auto;">
            <div v-for="(item, index) in noticeList" :key="index">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 13px">
                <div
                  style="width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px;">
                  {{
                    item.noticeTitle }}</div>
                <div style="color: #0288FF;  font-size: 14px; cursor: pointer;" @click="goNotice(item.noticeId)">详情
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>


    <el-row :gutter="24" style="height: 400px;margin-top: 20px;">
      <el-col :span="12">
        <div class="echartsMain">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>入库类型统计</div>
              <div>
                <el-date-picker v-model="dateInventoryTypeObj" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
                <el-button type="primary" @click="getInventoryTypeList">搜索</el-button>
              </div>

            </div>
          </div>
          <div class="echartsBox" style="margin-top: 20px;" id="echartsInventoryType"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="echartsMain">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>出库类型统计</div>
              <div>
                <el-date-picker v-model="dateOutInventoryTypeObj" type="daterange" range-separator="至"
                  start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" style="margin: 0 20px;" />
                <el-button type="primary" @click="getOutInventoryTypeList">搜索</el-button>
              </div>
            </div>
          </div>
          <div class="echartsBox" style="margin-top: 20px;" id="echartsOutInventoryType"></div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="公告详情" v-model="open" width="780px" append-to-body @close="closeDialog">
      <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="内容">
              <editor v-model="noticeContent" :min-height="192" :readOnly="true" :showToolbar="false" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <template #footer>
            <div class="dialog-footer" >
               <el-button type="primary" @click="submitForm" :disabled="isDetail">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template> -->
    </el-dialog>

    <!-- <el-row :gutter="24" style="margin-top: 20px;">
      <el-col :span="24" style="height: 400px;">
        <div class="echartsMain" style="padding-bottom: 0;">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>入库指标统计</div>
              <el-date-picker
                v-model="dateDailyInventoryObj"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                style="margin: 0 20px;"
              />
              <el-button type="primary" @click="getDailyInventoryList">搜索</el-button>
            </div>
          </div>
          <div class="echartsBox" style="margin-top: 20px;" id="echartsDailyInventory"></div>

        </div>
      </el-col>
      <el-col :span="24" style="height: 400px;">
        <div class="echartsMain" style="padding-top: 0;">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>出库指标统计</div>
            </div>
          </div>
          <div class="echartsBox" style="margin-top: 20px;" id="echartsDailyOutInventory"></div>
        </div>
      </el-col>
    </el-row> -->



    <!-- <el-row :gutter="24" style="height: 400px;margin-top: 20px;">
      <el-col :span="24">
        <div class="echartsMain">
          <div class="titleBox">
            <div class="line"></div>
            <div class="name">
              <div>出库指标统计</div>
              <el-date-picker
                v-model="dateDailyInventoryObj"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                style="margin: 0 20px;"
              />
              <el-button type="primary" @click="getDailyInventoryList">搜索</el-button>
            </div>
          </div>
          <div class="echartsBox" style="margin-top: 20px;" id="echartsDailyOutInventory"></div>
        </div>
      </el-col>
    </el-row> -->


  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue";
import { getHomeState, getAgeLong, getWait, getInventoryReview, getOutTypeByTime, getInTypeByTime, getDailyInventory, getNoticeList } from '@/api/index'
import { listNotice, getNotice } from "@/api/system/notice";
import { parseTime } from '@/utils/manage'


const { proxy } = getCurrentInstance();
const a = (scope) => {
  console.log(scope)
}

// 顶部月统计数据
let countObj = ref({})
let colorList = ref(['#00968F', '#0077a0', '#61cdbb'])

// 查询时间
let startTime = parseTime(new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), '{y}-{m}-{d}')  // 14天前
let endTime = parseTime(new Date(), '{y}-{m}-{d}')  // 当前时间

// 获取月统计、当前入库类型统计、物资类型统计接口
const getMonthCountList = (params) => {
  getHomeState(params).then(res => {
    // 月统计
    countObj.value = res.data?.kpi
    // 当前入库类型统计 
    getChartInStorage(res.data?.currentInType, "echartsInStorage")
    //物资类型统计 
    getChartGoodsType(res.data?.materialType)
  })
}

// 预警 + 库龄统计
const getAgeLongList = () => {
  getAgeLong().then(res => {
    let data1 = res.data.slice(0, 3)
    getChartInventoryAge(data1, "inventoryAgeEchatrs")
    let data2 = res.data.slice(3)
    getChartInventoryAge(data2, "warningEchatrs")
  })
}

// 自定义单元格样式
// const handleCellStyle = ({ row, column, rowIndex, columnIndex }) => {
//   // 示例：根据“类型”和“情况”设置颜色
//   if (row.type === '应到未到' && row.situation === '部分未到') {
//     return { backgroundColor: '#FCE9D2', color: '#C77800' }; // 浅橙色
//   }
//   if (row.type === '应到未到' && row.situation === '全部未到') {
//     return { backgroundColor: '#E9F3FF', color: '#409EFF' }; // 浅蓝色
//   }
//   if (row.type === '应出未出' && row.situation === '全部未出') {
//     return { backgroundColor: '#E8F8F5', color: '#28A745' }; // 浅绿色
//   }
//   // 其他默认样式
//   return { backgroundColor: '#FFFFFF', color: '#333333' };
// };
const handleCellStyle = () => {
  return { backgroundColor: '#f5f7fa' }
}

// 待办事项数据
let waitTableData = ref([])
const getWaitList = () => {
  getWait().then(res => {
    waitTableData.value = res.data
  })
}

// 仓库使用率数据
const getInventoryReviewList = () => {
  getInventoryReview().then(res => {
    getChartInventoryReview(res.data)
  })
}

// 入库类型统计-时间搜索
const dateInventoryTypeObj = ref([])
const getInventoryTypeList = () => {
  let params = {
    startDate: dateInventoryTypeObj.value?.[0],
    endDate: dateInventoryTypeObj.value?.[1]
  }
  getInTypeByTime(params).then(res => {
    getChartInventoryType(res.data, "echartsInventoryType")
  })
}

// 出库类型统计-时间搜索
const dateOutInventoryTypeObj = ref([[]])
const getOutInventoryTypeList = () => {
  let params = {
    startDate: dateOutInventoryTypeObj.value?.[0],
    endDate: dateOutInventoryTypeObj.value?.[1]
  }
  getOutTypeByTime(params).then(res => {
    getChartInventoryType(res.data, "echartsOutInventoryType")
  })
}

// todo 已注释内容 - 出库指标统计/入库指标统计
const getChartDailyInventory = (data, id) => {
  let xAxisData = []
  let projectData = []
  let totalData = []
  let priceData = []
  data.forEach(item => {
    xAxisData.push(item.xj)
    projectData.push(item.projectCount)
    totalData.push(item.itemCount)
    priceData.push(item.amountHt)
  })
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    grid: {
      // bottom: '8%',
    },
    legend: {
      // data: ['项目数', '条目数', '总金额']
    },
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 30,
        },
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        // min: 0,
        // max: 250,
        // interval: 50,
        axisLabel: {
          formatter: '{value} 个'
        },
        // splitLine: {
        //   // 调整纵坐标网格线样式，比如设为虚线、浅色
        //   show: true,
        //   lineStyle: {
        //     color: '#eee', // 浅色，降低存在感
        //     type: 'dashed' // 虚线
        //   }
        // }
      },
      {
        type: 'value',
        name: '金额',
        // min: 0,
        // max: 25,
        // interval: 5,
        axisLabel: {
          formatter: '{value} 元'
        },
        // splitLine: {
        //   show: true,
        //   lineStyle: {
        //     color: '#eee',
        //     type: 'dashed'
        //   }
        // }
      }
    ],
    series: [
      {
        name: '项目数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 个';
          }
        },
        data: projectData
      },
      {
        name: '总条目数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 个';
          }
        },
        data: totalData
      },
      {
        name: '总金额',
        type: 'bar',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 元';
          }
        },
        data: priceData
      }
    ]
  });
}

const dateDailyInventoryObj = ref([startTime, endTime])
const getDailyInventoryList = () => {
  let params = {
    start: dateDailyInventoryObj.value[0],
    end: dateDailyInventoryObj.value[1]
  }
  getDailyInventory(params).then(res => {
    getChartDailyInventory(res.data.in, "echartsDailyInventory")
    getChartDailyInventory(res.data.out, "echartsDailyOutInventory")
  })
}
//todo 注释内容完成

// 通知公告列表
const noticeList = ref([])
const getNoticeListValue = () => {
  getNoticeList().then(res => {
    noticeList.value = res.rows;
  })
}
//通知公告详情
const open = ref(false);
const noticeContent = ref("")
const goNotice = (noticeId) => {
  getNotice(noticeId).then(response => {
    noticeContent.value = response.data.noticeContent;
    open.value = true;
  });
  // 张金波注释，不跳转到列表，只弹开详情
  // proxy.$router.push({
  //   path: '/system/notice',
  // })
}

onMounted(() => {
  // 入库类型统计查询时间
  dateInventoryTypeObj.value = [startTime, endTime]
  // 出库类型统计查询时间
  dateOutInventoryTypeObj.value = [startTime, endTime]

  getMonthCountList()// 获取月统计、当前入库类型统计、物资类型统计接口
  getAgeLongList()// 预警 + 库龄统计
  getWaitList()// 待办事项数据
  getInventoryReviewList()// 仓库使用率数据
  getInventoryTypeList()// 入库类型统计-时间搜索
  getOutInventoryTypeList()// 出库类型统计-时间搜索
  getNoticeListValue()// 通知公告列表
});

const downloadExcel = () => {
  proxy.download('/stat/stockAge/export30', {}, `库龄统计_${new Date().getTime()}.xlsx`)
}


// 预警 + 库龄统计 图表
const getChartInventoryAge = (data, id) => {
  let chartDom = document.getElementById(id);
  let myChart = echarts.init(chartDom);
  myChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    color: colorList.value,
    series: [
      {
        name: '库龄',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
}
// 仓库使用率数据图表
const getChartInventoryReview = (data) => {
  let xAxisData = []
  let totalData = []
  let usedData = []
  let freeData = []
  data.forEach(item => {
    xAxisData.push(item.cangkuName)
    totalData.push(item.totalSlot)
    usedData.push(item.usedSlot)
    freeData.push(item.unusedSlot)
  })
  var chartDom = document.getElementById('echartsInventoryReview');
  var myChart = echarts.init(chartDom);
  myChart.setOption({
    // title: {
    //   text: 'World Population'
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      // bottom: '8%',
    },
    legend: {},
    color: colorList.value,
    yAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        rotate: 30,
      },
    },
    series: [
      {
        name: '总库位',
        type: 'bar',
        data: totalData
      },
      {
        name: '已使用',
        type: 'bar',
        data: usedData
      },
      {
        name: '未使用',
        type: 'bar',
        data: freeData
      }
    ]
  });
}
// 当前入库类型统计图表
const getChartInStorage = (data, id) => {
  let xAxisData = []
  let projectData = []
  let totalData = []
  let priceData = []
  data.forEach(item => {
    xAxisData.push(item.groupName)
    xAxisData.push(item.groupName)
    projectData.push(item.projectCount) //项目数
    totalData.push(item.totalQuantity) //总数量
    priceData.push(item.totalAmount)//总金额
  })
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    grid: {
      // bottom: '8%',
    },
    legend: {
      // data: ['项目数', '条目数', '总金额']
    },
    color: colorList.value,
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 30,
        },
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        // min: 0,
        // max: 250,
        // interval: 50,
        axisLabel: {
          formatter: '{value} 个'
        },
        // splitLine: {
        //   // 调整纵坐标网格线样式，比如设为虚线、浅色
        //   show: true,
        //   lineStyle: {
        //     color: '#eee', // 浅色，降低存在感
        //     type: 'dashed' // 虚线
        //   }
        // }
      },
      {
        type: 'value',
        name: '金额',
        // min: 0,
        // max: 25,
        // interval: 5,
        axisLabel: {
          formatter: '{value} 元'
        },
        // splitLine: {
        //   show: true,
        //   lineStyle: {
        //     color: '#eee',
        //     type: 'dashed'
        //   }
        // }
      }
    ],
    series: [
      {
        name: '项目数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 个';
          }
        },
        data: projectData
      },
      {
        name: '总数量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 个';
          }
        },
        data: totalData
      },
      {
        name: '总金额',
        type: 'bar',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 元';
          }
        },
        data: priceData
      }
    ]
  });
}
// 物资类型统计图表
const getChartGoodsType = (data) => {
  let xAxisData = []
  let projectData = []
  let totalData = []
  let priceData = []
  data.forEach(item => {
    xAxisData.push(item.groupName)
    projectData.push(item.projectCount) //项目数
    totalData.push(item.totalQuantity) //总数量
    priceData.push(item.totalAmount)//总金额
  })
  var chartDom = document.getElementById("echartsGoodsType");
  var myChart = echarts.init(chartDom);
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    grid: {
      // bottom: '8%',
    },
    legend: {
      // data: ['项目数', '条目数', '总金额']
    },
    color: colorList.value,
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 30,
        },
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        // min: 0,
        // max: 250,
        // interval: 50,
        axisLabel: {
          formatter: '{value} 个'
        },
        // splitLine: {
        //   // 调整纵坐标网格线样式，比如设为虚线、浅色
        //   show: true,
        //   lineStyle: {
        //     color: '#eee', // 浅色，降低存在感
        //     type: 'dashed' // 虚线
        //   }
        // }
      },
      {
        type: 'value',
        name: '金额',
        // min: 0,
        // max: 25,
        // interval: 5,
        axisLabel: {
          formatter: '{value} 元'
        },
        // splitLine: {
        //   show: true,
        //   lineStyle: {
        //     color: '#eee',
        //     type: 'dashed'
        //   }
        // }
      }
    ],
    series: [
      {
        name: '项目数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 个';
          }
        },
        data: projectData
      },
      // {
      //   name: '条目数',
      //   type: 'bar',
      //   tooltip: {
      //     valueFormatter: function (value) {
      //       return value + ' 个';
      //     }
      //   },
      //   data: itemData
      // },
      {
        name: '总数量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 个';
          }
        },
        data: totalData
      },
      {
        name: '总金额',
        type: 'bar',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 元';
          }
        },
        data: priceData
      }
    ]
  });
}
// 入库类型统计/出库类型统计图表
const getChartInventoryType = (data, id) => {
  let xAxisData = []
  let projectData = []
  let totalData = []
  let itemData = []
  let priceData = []
  data.forEach(item => {
    xAxisData.push(item.groupName)
    projectData.push(item.projectCount) //项目数
    totalData.push(item.totalQuantity) //总数量
    priceData.push(item.totalAmount)//总金额
  })
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    grid: {
      // bottom: '8%',
    },
    color: colorList.value,
    legend: {
      // data: ['项目数', '条目数', '总金额']
    },
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 30,
        },
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        // min: 0,
        // max: 250,
        // interval: 50,
        axisLabel: {
          formatter: '{value} 个'
        },
        // splitLine: {
        //   // 调整纵坐标网格线样式，比如设为虚线、浅色
        //   show: true,
        //   lineStyle: {
        //     color: '#eee', // 浅色，降低存在感
        //     type: 'dashed' // 虚线
        //   }
        // }
      },
      {
        type: 'value',
        name: '金额',
        // min: 0,
        // max: 25,
        // interval: 5,
        axisLabel: {
          formatter: '{value} 元'
        },
        // splitLine: {
        //   show: true,
        //   lineStyle: {
        //     color: '#eee',
        //     type: 'dashed'
        //   }
        // }
      }
    ],
    series: [
      {
        name: '项目数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 个';
          }
        },
        data: projectData
      },
      {
        name: '总数量',

        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 个';
          }
        },
        data: totalData
      },
      {
        name: '总金额',
        type: 'bar',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 元';
          }
        },
        data: priceData
      }
    ]
  });
}


</script>

<style scoped lang="scss">
.dashboard {
  // position: absolute;
  // top: 0;
  // bottom: 0;
  // left: 0;
  // right: 0;
  // display: flex;
  // flex-direction: column;
  background-color: #F5F5F5;
  padding: 32rpx;

  .itemBox {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
  }

  .inOrOutBox {
    padding: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .inOrOutBox_left {
      width: 60%;
    }

    .inOrOutBox_icon {
      img {
        width: 80px;
        height: 80px;
        opacity: 0.3;
      }

    }

  }

  .boxNum {
    height: 100px;
    width: 100%;
    border-radius: 8px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 20px;

    .boxNum_icon {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 10px;
    }
  }

  .titleBox {
    display: flex;
    align-items: center;

    .line {
      width: 6px;
      height: 15px;
      background: #199793;
      border-radius: 12px 12px 12px 12px;
      transform: rotateX(360deg);
    }

    .name {
      width: 100%;
      margin-left: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 28px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      line-height: 23px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .main {
    background-color: #FFFFFF;
    padding: 20px;
    box-shadow: 0px 4px 12px 0px rgba(255, 223, 217, 0.2);
    border-radius: 6px;
    height: 360px;

    .main_progress {
      margin-top: 20px;
      margin-bottom: 8px;
    }

    .main_box {
      width: 88%;
      height: 110px;
      cursor: pointer;
      margin-top: 25px;
      background: #E2F1FE;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      text-align: center;
      flex-direction: column;
    }

    .warningBox {
      border-radius: 8px;
      border: #fecaca 1px solid;
      height: 100%;
      color: #F87777;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 24px;
    }
  }

  .echartsMain {
    background-color: #FFFFFF;
    height: 100%;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;

    .echartsBox {
      flex: 1;
    }
  }
}
</style>