element-plus+vue3+echarts实现自适应可视化大屏

安装 autofit.js 、echarts
npm install --save autofit.js

<template>
  <div class="content">
    <div class="zerofloor">
      <div class="datatitle" id="datatitle">生产作业可视化大屏div>
      <div class="dashboardquery" id="dashboardquery">
        <div class="dashboarddate">
          <el-date-picker style="width: 130px" v-model="todaydate" @change="handleChangedate" :clearable="false" :default-value="new Date()" type="date">el-date-picker>
          <el-cascader ref="cascaderRef" @change="handleChangecascader" v-model="warehouseSelect" style="width: 230px" :options="warehouseOptions" :props="cascaderprops" />
          <el-select v-model="dimension" placeholder="Select" style="width: 130px" @change="handleChangeDimension">
            <el-option v-for="item in dimensionOptions" :key="item.value" :label="item.label" :value="item.value" />
          el-select>
        div>
      div>
    div>
    <div class="firstfloor">
      <el-row>
        <div class="data-progress" id="data-progress">
          <div class="progress" v-for="item in orderOptions" :key="item.index">
            <div class="leftprogress">
              <el-progress type="circle" :percentage="item.percentage" :stroke-width="10" :width="progresswidth" :color="colors">
                <template #default="{ percentage }">
                  <span class="percentage-value">{{ percentage }}%span>
                  <br />
                  <span class="percentage-label">{{ t('page.完成率') }}span>
                template>
              el-progress>
            div>
            <div class="rightprogress">
              <span class="progress-text">{{ item.name }}span>
              <br />
              <span class="progress-text">{{ item.value }}span>
            div>
          div>
        div>
      el-row>
    div>
    <div class="secondfloor">
      <el-row>
        <el-col :span="12">
          <div class="box-card">
            <span class="cardhead">▋span>
            <span class="cardtitle">要货单span>
            <br />
            <div id="requireGoodsPie" style="width: 100%">div>
          div>
        el-col>
        <el-col :span="12">
          <div class="box-card">
            <span class="cardhead">▋span>
            <span class="cardtitle">调拨订单/销售订单span>
            <br />
            <div id="transOrSaleOrderPie" style="width: 100%">div>
          div>
        el-col>
      el-row>
    div>
    <div class="thirdfloor">
      <el-row>
        <el-col :span="12">
          <div class="jianxuan">
            <div class="box-card">
              <span class="cardhead">▋span>
              <span class="cardtitle">发货通知单span>
              <br />
              <div id="outOrderPie" style="width: 100%">div>
            div>
          div>
        el-col>
        <el-col :span="12">
          <div class="peisong">
            <div class="box-card">
              <span class="cardhead">▋span>
              <span class="cardtitle">库存调拨入库单span>
              <br />
              <div id="stockTransInPie" style="width: 100%">div>
            div>
          div>
        el-col>
      el-row>
    div>
    <div class="fourthfloor">
      <el-row>
        <el-col :span="24">
          <div class="quehuo">
            <div class="box-card">
              <span class="cardhead">▋span>
              <span class="cardtitle">配送单span>
              <div>
                
                <div id="delieveryOrderPie" style="width: 50%; float: left; background-color: #0b2545">div>
                
                <div id="delieveryTrackPie" style="width: 50%; float: left; background-color: #0b2545">div>
              div>
            div>
          div>
        el-col>
      el-row>
    div>
  div>
template>

<script lang="ts" setup>
import { reactive, onMounted, ref, watch } from 'vue'
import { i18n } from '@/locales/setupI18n'
import { success, confirmBox } from 'fl-ui'
import { warningbox, errorbox } from '@/utils'
import * as echarts from 'echarts'
import autofit from 'autofit.js'
import { Download } from '@element-plus/icons-vue'
import { QueryDashboardOptions, QueryDashboardData } from '@/api/datacenter/datadashboard'
import { fwSelect, fwConstant, fwWarehouseMember, fwTempPage } from '@/components'
import { color } from 'html2canvas/dist/types/css/types/color'
const { t } = i18n.global as any

let leftName = ref('')
let progresswidth = 90
let pageheight = window.innerHeight // 获取窗口高度
let cardheight = 0 // 获取窗口高度
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

const cascaderprops = {
  checkStrictly: true,
}

const warehouseOptions = ref()
// const orderOptions = ref()
const cascaderRef = ref<any>(null)

// 入参
let todaydate = ref()
let dimension = ref()
const dimensionOptions = [
  {
    value: '1',
    label: '单据维度',
  },
  {
    value: '2',
    label: '件数维度',
  },
]

const orderOptions = ref([
  {
    index: 0,
    value: 0,
    name: '要货单待生成订单',
    percentage: '0',
  },
  {
    index: 0,
    value: 0,
    name: '订单待生成发货单',
    percentage: '0',
  },
  {
    index: 0,
    value: 0,
    name: '发货单待发货通知',
    percentage: '0',
  },
  {
    index: 0,
    value: 0,
    name: '调拨订单待生成配送单',
    percentage: '0',
  },
  {
    index: 0,
    value: 0,
    name: '配送单待发运',
    percentage: '0',
  },
  {
    index: 0,
    value: 0,
    name: '运单待签收',
    percentage: '0',
  },
])
let warehouseSelect = ref()

// 要货单
let StockReqData = ref([
  { value: 0, name: '已生成订单' },
  { value: 0, name: '未生成订单' },
])
const requireGoodsPieoption = {
  color: ['#0274C1', '#B69241'], // 配置各版块颜色
  title: {
    // text: 'Referer of a Website',
    // subtext: 'Fake Data',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  // legend: {
  //   orient: 'vertical',
  //   left: 'left'
  // },
  series: [
    {
      // name: '要货单',
      type: 'pie',
      radius: '65%',
      data: StockReqData.value,
      label: {
        show: true,
        formatter: '{b}:   {c}', // 自定义lable处展示那些数据及其格式
        fontSize: 13, // 字体大小
        color: '#ffffff',
        // padding: [0, -20], //调整左右位置
      },
      labelLine: {
        // length: -50, // 引导线起点到文字的距离
        length2: 80, // 引导线终点到饼图边缘的距离
      },
      labelLayout: {
        verticalAlign: 'bottom',
        dy: 0,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    {
      // name: '要货单',
      type: 'pie',
      radius: '65%',
      data: StockReqData.value,
      label: {
        normal: {
          position: 'inside',
          show: true,
          color: '#ffffff',
          formatter: (d: any) => {
            return d.percent + '%'
          },
        },
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}

// 调拨订单/销售订单
let TransSaleOrderData = ref([
  { value: 0, name: '已生成发货单' },
  { value: 0, name: '缺货' },
])
const transOrSaleOrderPieoption = {
  color: ['#0274C1', '#00D7E9'], // 配置各版块颜色
  title: {
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      // name: '调拨订单/销售订单',
      type: 'pie',
      radius: '65%',
      data: TransSaleOrderData.value,
      label: {
        show: true,
        formatter: '{b}:   {c}', // 自定义lable处展示那些数据及其格式
        fontSize: 13, // 字体大小
        color: '#ffffff',
        // padding: [0, -20], //调整左右位置
      },
      labelLine: {
        // length: -50, // 引导线起点到文字的距离
        length2: 80, // 引导线终点到饼图边缘的距离
      },
      labelLayout: {
        verticalAlign: 'bottom',
        dy: 0,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    {
      // name: '调拨订单/销售订单',
      type: 'pie',
      radius: '65%',
      data: TransSaleOrderData.value,
      label: {
        normal: {
          position: 'inside',
          show: true,
          color: '#ffffff',
          formatter: (d: any) => {
            return d.percent + '%'
          },
        },
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}

// 发货通知单
let OutOrderData = ref([
  { value: 0, name: '已打印' },
  { value: 0, name: '拣选中' },
  { value: 0, name: '拣选完成' },
  { value: 0, name: '已发货通知' },
])
const outOrderPieoption = {
  color: ['#686ACC', '#B69241', '#0274C1', '#00D7E9'], // 配置各版块颜色
  title: {
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      // name: '发货通知单',
      type: 'pie',
      radius: '65%',
      data: OutOrderData.value,
      label: {
        show: true,
        position: 'outer',
        formatter: '{b}:   {c}', // 自定义lable处展示那些数据及其格式
        fontSize: 13, // 字体大小
        color: '#ffffff',
        // padding: [0, -50], //调整左右位置
      },
      labelLine: {
        // length: 20, // 引导线起点到文字的距离
        length2: 80, // 引导线终点到饼图边缘的距离
      },
      labelLayout: {
        verticalAlign: 'bottom',
        dy: 0,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    {
      // name: '发货通知单',
      type: 'pie',
      radius: '65%',
      data: OutOrderData.value,
      label: {
        normal: {
          position: 'inside',
          show: true,
          color: '#ffffff',
          formatter: (d: any) => {
            return d.percent + '%'
          },
        },
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
}

//库存调拨入库单
let StockTransInData = ref({
  allStockTransIn: 0,
  waitStore: 0,
  waitDelievery: 0,
  haveDelievery: 0,
})
const stockTransInPieoption = {
  // backgroundColor: '#100C2A',
  color: ['#6036CD', '#00B0FF', '#FFC000'],
  legend: {
    orient: 'vertical',
    left: '75%',
    x: 'left',
    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
    y: 'center',
    top: '20%',
    itemHeight: 12, //图例的高度
    itemGap: 15, //图例之间的间距
    formatter: function (name: string) {
      let target
      if (name == '待集货') {
        target = StockTransInData.value.waitStore
      } else if (name == '已生成配送单') {
        target = StockTransInData.value.haveDelievery
      } else {
        target = StockTransInData.value.waitDelievery
      }
      let arr = [name + ' ', ' ' + target]
      return arr.join(' ')
    },
    data: [
      {
        name: '待集货',
        icon: 'circle',
        textStyle: {
          color: '#6036CD', // 单独设置某一个图列的颜色
        },
      },
      {
        name: '已生成配送单',
        icon: 'circle',
        textStyle: {
          color: '#D2D3D8', // 单独设置某一个图列的颜色
        },
      },
      {
        name: '待生成配送单',
        icon: 'circle',
        textStyle: {
          color: '#D2D3D8', // 单独设置某一个图列的颜色
        },
      },
    ],
    //图例的名字需要和饼图的name一致，才会显示图例
  },
  series: [
    // 待集货
    {
      name: '待集货',
      type: 'pie',
      radius: ['70%', '75%'],
      left: ['65%', '50%'],
      //环的位置
      // label: {
      //   show: false,
      //   position: 'center',
      // },
      label: {
        normal: {
          position: 'center',
          show: true,
          color: '#ffffff',
          formatter: (d: any) => {
            return StockTransInData.value.allStockTransIn + '\n库存调拨入库单总数'
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '13',
          fontWeight: 'bold',
          color: '#ffffff',
        },
      },
      data: [
        {
          value: StockTransInData.value.waitStore, //需要显示的数据
          name: StockTransInData.value.waitStore + '\n待集货',
          itemStyle: {
            normal: {
              color: '#6036CD',
            },
          },
        },
        {
          value: StockTransInData.value.allStockTransIn - StockTransInData.value.waitStore,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            normal: {
              color: '#081A3C',
            },
          },
        },
      ],
    },
    // 已生成配送单
    {
      name: '已生成配送单',
      type: 'pie',
      radius: ['60%', '65%'],
      left: ['65%', '50%'],
      //环的位置
      label: {
        show: false,
        position: 'center',
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '13',
          fontWeight: '500',
          color: '#ffffff',
        },
      },
      data: [
        {
          value: StockTransInData.value.haveDelievery, //需要显示的数据
          name: StockTransInData.value.haveDelievery + '\n已生成配送单',
          itemStyle: {
            normal: {
              color: '#00B0FF',
            },
          },
        },
        {
          value: StockTransInData.value.allStockTransIn - StockTransInData.value.haveDelievery,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            normal: {
              color: '#081A3C',
            },
          },
        },
      ],
    },
    // 待生成配送单
    {
      name: '待生成配送单',
      type: 'pie',
      radius: ['50%', '55%'],
      left: ['65%', '50%'],
      //环的位置
      label: {
        show: false,
        position: 'center',
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '13',
          fontWeight: 'bold',
          color: '#ffffff',
        },
        itemStyle: {
          normal: {
            color: '#FFC000',
          },
        },
      },
      data: [
        {
          value: StockTransInData.value.waitDelievery, //需要显示的数据
          name: StockTransInData.value.waitDelievery + '\n待生成配送单',
          itemStyle: {
            normal: {
              color: '#FFC000',
            },
          },
        },
        {
          value: StockTransInData.value.allStockTransIn - StockTransInData.value.waitDelievery,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            normal: {
              color: '#081A3C',
            },
          },
        },
      ],
    },
  ],
}

//配送单
let DelieveryOrderData = ref([
  { value: 0, name: '已调度' },
  { value: 0, name: '已发运' },
])
const delieveryOrderPieoption = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: '75%',
    x: 'left',
    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
    y: 'center',
    top: '42%',
    textStyle: {
      color: '#ffffff',
    },
    itemHeight: 12, //图例的高度
    itemGap: 15, //图例之间的间距
  },
  formatter: function (name: string) {
    return name + DelieveryOrderData.value.filter(x => x.name == name)[0]?.value
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '66%'],
      left: ['65%', '50%'],
      //环的位置
      // label: {
      //   show: false,
      //   position: 'center',
      // },
      label: {
        normal: {
          position: 'center',
          show: true,
          color: '#D2D3D8',
          formatter: (d: any) => {
            let total = 0
            DelieveryOrderData.value.forEach(order => {
              total += order.value
            })
            return total
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '13',
          fontWeight: 'bold',
          color: '#ffffff',
        },
      },
      data: DelieveryOrderData.value,
    },
  ],
}
//配送单物流轨迹
const DelieveryTrackData = ref({
  collected: 0,
  transited: 0,
  signed: 0,
  allTrack: 0,
})
// 物流轨迹百分比
const PercentTrackData = ref(['0%', '0%', '0%'])
const delieveryTrackPieoption = {
  // backgroundColor: '#100C2A',
  color: ['#6036CD', '#00B0FF', '#FFC000'],
  legend: {
    orient: 'vertical',
    left: '75%',
    x: 'left',
    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
    y: 'center',
    top: '20%',
    itemHeight: 12, //图例的高度
    itemGap: 15, //图例之间的间距
    formatter: function (name: string) {
      let target
      if (name == '已揽收') {
        target = DelieveryTrackData.value.collected
      } else if (name == '已中转') {
        target = DelieveryTrackData.value.transited
      } else {
        target = DelieveryTrackData.value.signed
      }
      let arr = [name + ' ', ' \n\n' + target + '件']
      return arr.join(' ')
    },
    data: [
      {
        name: '已揽收',
        icon: 'circle',
        textStyle: {
          color: '#6036CD', // 单独设置某一个图列的颜色
        },
      },
      {
        name: '已中转',
        icon: 'circle',
        textStyle: {
          color: '#D2D3D8', // 单独设置某一个图列的颜色
        },
      },
      {
        name: '已签收',
        icon: 'circle',
        textStyle: {
          color: '#D2D3D8', // 单独设置某一个图列的颜色
        },
      },
    ],
    //图例的名字需要和饼图的name一致，才会显示图例
  },
  tooltip: {
    show: false,
    fontSize: '11',
    trigger: 'item',
    formatter: '{a}
{b}:{c}({d}%)',
  },
  grid: {
    top: '12%',
    bottom: '50%',
    left: '44%',
    containLabel: false,
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        inside: true,
        textStyle: {
          color: '#ffffff',
          fontSize: 13,
        },
        show: true,
      },
      data: PercentTrackData.value,
    },
  ],
  xAxis: [
    {
      show: false,
    },
  ],
  series: [
    // 已揽收
    {
      name: '已揽收',
      type: 'pie',
      radius: ['55%', '75%'],
      left: ['65%', '50%'],
      //环的位置
      label: {
        normal: {
          position: 'inside',
          show: false,
          fontSize: '11',
          color: '#ffffff',
          formatter: (d: any) => {
            return d.percent + '%'
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '13',
          fontWeight: 'bold',
          color: '#ffffff',
        },
      },
      data: [
        {
          value: DelieveryTrackData.value.collected, //需要显示的数据
          name: DelieveryTrackData.value.collected + '\n已揽收',
          itemStyle: {
            normal: {
              color: '#6036CD',
            },
          },
        },
        {
          value: DelieveryTrackData.value.allTrack - DelieveryTrackData.value.collected,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            // stop the chart from rendering this piece
            color: 'none',
            decal: {
              symbol: 'none',
            },
          },
          label: {
            show: false,
          },
        },
      ],
    },
    // 已中转
    {
      name: '已中转',
      type: 'pie',
      radius: ['30%', '50%'],
      left: ['65%', '50%'],
      //环的位置
      label: {
        normal: {
          position: 'inside',
          show: false,
          fontSize: '11',
          color: '#ffffff',
          formatter: (d: any) => {
            return d.percent + '%'
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '13',
          fontWeight: '500',
          color: '#ffffff',
        },
      },
      data: [
        {
          value: DelieveryTrackData.value.transited, //需要显示的数据
          name: DelieveryTrackData.value.transited + '\n已中转',
          itemStyle: {
            normal: {
              color: '#00B0FF',
            },
          },
        },
        {
          value: DelieveryTrackData.value.allTrack - DelieveryTrackData.value.transited,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            // stop the chart from rendering this piece
            color: 'none',
            decal: {
              symbol: 'none',
            },
          },
          label: {
            show: false,
          },
        },
      ],
    },
    // 已签收
    {
      name: '已签收',
      type: 'pie',
      radius: ['5%', '25%'],
      left: ['65%', '50%'],
      //环的位置
      label: {
        normal: {
          position: 'inside',
          show: false,
          fontSize: '11',
          color: '#ffffff',
          formatter: (d: any) => {
            return d.percent + '%'
          },
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '13',
          fontWeight: 'bold',
          color: '#ffffff',
        },
        itemStyle: {
          normal: {
            color: '#FFC000',
          },
        },
      },
      data: [
        {
          value: DelieveryTrackData.value.signed, //需要显示的数据
          name: DelieveryTrackData.value.signed + '\n已签收',
          itemStyle: {
            normal: {
              color: '#FFC000',
            },
          },
        },
        {
          value: DelieveryTrackData.value.allTrack - DelieveryTrackData.value.signed,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            // stop the chart from rendering this piece
            color: 'none',
            decal: {
              symbol: 'none',
            },
          },
          label: {
            show: false,
          },
        },
      ],
    },
  ],
}

/**初始化数据 */
let datatitle = ref<any>(null)
let dashboardquery = ref<any>(null)
let dataprogress = ref<any>(null)
let requireGoodsPie = ref<any>(null)
let transOrSaleOrderPie = ref<any>(null)
let outOrderPie = ref<any>(null)
let stockTransInPie = ref<any>(null)
let delieveryOrderPie = ref<any>(null)
let delieveryTrackPie = ref<any>(null)
/**初始化 */
function pageinit() {
  autofit.init({
    dh: 880,
    dw: 1920,
    el: '.content',
    resize: true,
  })
  pageheight = window.innerHeight - 60 // 获取窗口高度
  cardheight = pageheight / 4 > 188 ? pageheight / 4 : 188
  datatitle = document.getElementById('datatitle')
  datatitle.style.height = cardheight * 0.3 - 30 + 'px'
  dashboardquery = document.getElementById('dashboardquery')
  dashboardquery.style.height = cardheight * 0.2 + 'px'

  dataprogress = document.getElementById('data-progress')
  dataprogress.style.height = cardheight * 0.5 + 'px'
  progresswidth = (90 / (cardheight * 0.5)) * 90
  // 要货单
  requireGoodsPie = document.getElementById('requireGoodsPie') // 基于准备好的dom，初始化echarts实例
  requireGoodsPie.style.height = cardheight + 'px'
  var pickChart = echarts.init(requireGoodsPie)
  pickChart.clear()
  pickChart.setOption(requireGoodsPieoption) // 绘制图表
  // 调拨订单/销售订单
  transOrSaleOrderPie = document.getElementById('transOrSaleOrderPie')
  transOrSaleOrderPie.style.height = cardheight + 'px'
  var deliveryChart = echarts.init(transOrSaleOrderPie)
  deliveryChart.clear()
  deliveryChart.setOption(transOrSaleOrderPieoption)
  // 发货通知单
  outOrderPie = document.getElementById('outOrderPie')
  outOrderPie.style.height = cardheight + 'px'
  var shipmentChart = echarts.init(outOrderPie)
  shipmentChart.clear()
  shipmentChart.setOption(outOrderPieoption)
  // 库存调拨入库单
  stockTransInPie = document.getElementById('stockTransInPie')
  stockTransInPie.style.height = cardheight + 'px'
  var stockTransInChart = echarts.init(stockTransInPie)
  stockTransInChart.clear()
  stockTransInChart.setOption(stockTransInPieoption, true)
  // 配送单
  delieveryOrderPie = document.getElementById('delieveryOrderPie')
  delieveryOrderPie.style.height = cardheight + 'px'
  var outstockcomChart = echarts.init(delieveryOrderPie)
  outstockcomChart.setOption(delieveryOrderPieoption)
  // 配送单物流轨迹
  delieveryTrackPie = document.getElementById('delieveryTrackPie')
  delieveryTrackPie.style.height = cardheight + 'px'
  var outstocksamChart = echarts.init(delieveryTrackPie)
  outstocksamChart.setOption(delieveryTrackPieoption)
}

/**
 * 级联选择器改变
 */
function handleChangecascader(value: any, selectedData: any) {
  GetDashboardData()
  console.log(warehouseSelect)
  // 关闭级联选择器
  cascaderRef.value.togglePopperVisible()
  var selectoption = cascaderRef.value.getCheckedNodes()
  leftName.value = selectoption[0].label
}

/**
 * 日期改变
 */
function handleChangedate() {
  GetDashboardData()
}

/**
 * 维度
 */
function handleChangeDimension() {
  GetDashboardData()
}
/**
 * 调用接口
 */
function GetDashboardData() {
  debugger
  QueryDashboardData({ Dimension: dimension.value, TodayDate: todaydate.value, BaseUnitID: warehouseSelect?.value[0], WarehouseID: warehouseSelect?.value[1] }).then((res: any) => {
    if (res.flag) {
      orderOptions.value = res.data.orderPercents //单据数据

      //要货数据
      StockReqData.value = [
        { value: res.data.stockReqData.haveStockreq, name: '已生成订单' },
        { value: res.data.stockReqData.waitStockreq, name: '未生成订单' },
      ]
      requireGoodsPieoption.series[0].data = StockReqData.value
      requireGoodsPieoption.series[1].data = StockReqData.value

      //调拨订单/销售订单
      TransSaleOrderData.value = [
        { value: res.data.transOrSaleOrderData.beOutOrder, name: '已生成发货单' },
        { value: res.data.transOrSaleOrderData.stockOut, name: '缺货' },
      ]
      transOrSaleOrderPieoption.series[0].data = TransSaleOrderData.value
      transOrSaleOrderPieoption.series[1].data = TransSaleOrderData.value

      //发货通知单
      OutOrderData.value = [
        { value: res.data.outOrderData.printed, name: '已打印' },
        { value: res.data.outOrderData.picking, name: '拣选中' },
        { value: res.data.outOrderData.picked, name: '拣选完成' },
        { value: res.data.outOrderData.outed, name: '已发货通知' },
      ]
      outOrderPieoption.series[0].data = OutOrderData.value
      outOrderPieoption.series[1].data = OutOrderData.value

      //库存调拨入库单
      StockTransInData.value = {
        allStockTransIn: res.data.stockTransInData.allStockTransIn,
        waitStore: res.data.stockTransInData.waitStore,
        waitDelievery: res.data.stockTransInData.waitDelievery,
        haveDelievery: res.data.stockTransInData.haveDelievery,
      }
      stockTransInPieoption.series[0].data[0].value = StockTransInData.value.waitStore
      stockTransInPieoption.series[0].data[1].value = StockTransInData.value.allStockTransIn - StockTransInData.value.waitStore
      stockTransInPieoption.series[1].data[0].value = StockTransInData.value.haveDelievery
      stockTransInPieoption.series[1].data[1].value = StockTransInData.value.allStockTransIn - StockTransInData.value.haveDelievery
      stockTransInPieoption.series[2].data[0].value = StockTransInData.value.waitDelievery
      stockTransInPieoption.series[2].data[1].value = StockTransInData.value.allStockTransIn - StockTransInData.value.waitDelievery

      //配送单
      DelieveryOrderData.value = [
        { value: res.data.delieveryData.dispatched, name: '已调度' },
        { value: res.data.delieveryData.shiped, name: '已发运' },
      ]
      delieveryOrderPieoption.series[0].data = DelieveryOrderData.value

      //配送单物流轨迹
      DelieveryTrackData.value = {
        collected: res.data.delieveryData.collected,
        transited: res.data.delieveryData.transited,
        signed: res.data.delieveryData.signed,
        allTrack: res.data.delieveryData.allTrack,
      }

      //物流轨迹百分比
      PercentTrackData.value = DelieveryTrackData.value.allTrack == 0 ? ['0%', '0%', '0%'] : [((DelieveryTrackData.value.collected * 100) / DelieveryTrackData.value.allTrack).toFixed(2) + '%', ((DelieveryTrackData.value.transited * 100) / DelieveryTrackData.value.allTrack).toFixed(2) + '%', ((DelieveryTrackData.value.signed * 100) / DelieveryTrackData.value.allTrack).toFixed(2) + '%']
      delieveryTrackPieoption.yAxis[0].data = PercentTrackData.value
      delieveryTrackPieoption.series[0].data[0].value = DelieveryTrackData.value.collected
      delieveryTrackPieoption.series[0].data[1].value = DelieveryTrackData.value.allTrack - DelieveryTrackData.value.collected
      delieveryTrackPieoption.series[1].data[0].value = DelieveryTrackData.value.transited
      delieveryTrackPieoption.series[1].data[1].value = DelieveryTrackData.value.allTrack - DelieveryTrackData.value.transited
      delieveryTrackPieoption.series[2].data[0].value = DelieveryTrackData.value.signed
      delieveryTrackPieoption.series[2].data[1].value = DelieveryTrackData.value.allTrack - DelieveryTrackData.value.signed
      pageinit()
    }
  })
}
//监听变更，刷新数据来源
// watch(
//   () => StockTransInData.value,
//   async () => {

//   },
// )
/**
 * 首次加载
 */
onMounted(() => {
  // 控件初始化
  todaydate.value = new Date()
  dimension.value = dimensionOptions[0].value // 默认选择第一个选项的值
  QueryDashboardOptions().then((res: any) => {
    if (res.flag) {
      warehouseOptions.value = res.data
      warehouseSelect.value = [res.data[0].value]
      leftName.value = res.data[0].label
      GetDashboardData()
    }
  })

  //页面初始化
  pageinit()
  //监视窗口发生变化再调用一次
  window.onresize = function (event) {
    pageinit()
  }
  setInterval(() => {
    // 这里写页面刷新的逻辑
    location.reload()
  }, 5 * 60 * 1000) // 5分钟刷新一次，单位是毫秒
})
script>
<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  background-color: #2a4a69;
  .zerofloor {
    // height: 15%;
    width: 100%;
    // background: linear-gradient(to left, #4e5973 0%, #467391 50%, #4e5973 100%);
    .datatitle {
      width: 100%;
      float: center;
      text-align: center;
      font-size: 25px;
      padding-bottom: 5px;
      // background-clip: text;
      color: azure;
    }
    .dashboardquery {
      width: 100%;
      .dashboarddate {
        width: 500px;
        margin-left: 70%;
        margin-top: 5px;
        display: flex;
        align-items: left;
        justify-content: space-between;
        :deep(.el-input__wrapper) {
          background-color: #2a4a69 !important;
          .el-input__inner {
            color: #ffffff;
          }
        }
      }
    }
  }

  .firstfloor {
    // height: 10%;
    margin: 0 5px 5px 0;
    padding-top: 5px;
    margin-left: 10px;
    .data-progress {
      width: 100%;
      padding: 5px 0 5px 0;
      background-color: #0a213d;
      display: flex;
      justify-content: space-between;
    }
    .data-progress .progress {
      float: left;
      width: 16.6%;
      color: azure;
    }
    .data-progress .progress .rightprogress {
      float: left;
      font-size: 16px;
      margin: 35px 0 0 10px;
    }
    .data-progress .progress .leftprogress {
      float: left;
      margin-left: 15px;
      .percentage-label {
        color: azure;
      }
      .percentage-value {
        color: azure;
      }
    }
  }
  .secondfloor,
  .thirdfloor,
  .fourthfloor {
    // height: 25%;
    margin: 0 0 5px 10px;
    .box-card {
      // height: 270px;
      background-color: #0b2545;
      margin: 0 5px 0 0;
      .cardhead {
        color: #31a7ff;
        margin-right: 3px;
      }
      .cardtitle {
        color: azure;
      }
    }
  }
}
style>

效果