kd-aiot-frontend-vis/src/views/bpm/vis-page/page2.vue

<template>
  <vue-fullscreen
    class="box-container"
    v-cloak
    v-model="isFullscreen"
    fullscreenClass="box-container"
    :exit-on-click-wrapper="false"
  >
    <div class="box-container" v-cloak>
      <div class="box-header">
        <div class="logo">
<!--          <img style="width: 20% ;height: 100%;transform: translate(51%,15%)" src="../../../assets/TGLOGO.png" alt="">-->
        </div>
        <div class="title">
          采购仓储数据看板
        </div>
        <div class="time">
          <span
            style="color: #7fa7ce;margin: 5px 10px 15px 0;cursor: pointer" @click.passive="onFullscreen">
            <i v-if="isFullscreen" title="取消全屏" class="el-icon-_screen-restore"></i>
            <i v-else title="全屏" class="el-icon-_screen-full"></i>
          </span>
          <div style="margin-right: 10px">
            <span style="color: #7fa7ce">{{ date }}</span>
            <span style="color: rgb(210 215 221);  padding: 0 5px;">{{ time }}</span>
            <span style="color: #7fa7ce;">{{ week }}
          </span>
          </div>

        </div>
      </div>


      <div class="box-middle">
        <div class="box-middle-content" style="width: 35%;cursor: pointer" @click="handelRouterTo('/page-eos/purchaseOrder')">
          <div class="box-middle-content-left">
            <span>月度总金额</span>
            <span>(万元)</span>
          </div>
          <div class="box-middle-content-right">
            <template v-for="item in MonthlyAmount">
              <span style="display: flex;align-content: flex-end"
                    v-if="item=='.'">{{ '.' }}</span>
              <span v-else class="box-border8">{{ item }}</span>
            </template>

          </div>
        </div>
        <div class="box-middle-content">
          <div class="box-middle-content-left">
            <span>年度总金额</span>
            <span>(万元)</span>
          </div>
          <div class="box-middle-content-right">
            <template v-for="item in YearlyAmount">
              <span style="display: flex;align-content: flex-end;"
                    v-if="item=='.'">{{ '.' }}</span>
              <span v-else class="box-border8" style=" width: 10%;">{{ item }}</span>
            </template>
          </div>
        </div>

      </div>
      <div class="box-footer">
        <div class="box-footer-right">
          <div class="box-echarts-top">
            <span class="box-top-name">月度采购明细</span>
          </div>
          <dv-scroll-board v-if="isFlag" :config="config" style="width:92%;height:80%;transform: translate(5%,7%);"/>
        </div>
        <div class="box-footer-left">
          <div class="box-echarts">
            <div class="box-echarts-top">
              <span class="box-top-name">年度采购统计</span>
              <span class="box-top-unit">(万元)</span>
            </div>
            <div class="monthly_sales_volume">
              <div v-if="isFlag" id="monthly_sales_volume" ref="monthly_sales_volume"></div>
            </div>

            <!--            <div style="position: fixed; transform: translate(13%, 110%);">-->
            <!--              <div style="color:#03c391">-->
            <!--                <span>{{ '累计签单金额 ' }}</span>-->
            <!--                <span style="font-weight: bold">{{ borderData[0].value }}</span>-->
            <!--              </div>-->
            <!--              <div style="color:#ea5082">-->
            <!--                <span>{{ '累计交货金额 ' }}</span>-->
            <!--                <span style="font-weight: bold">{{ borderData[1].value }}</span>-->
            <!--              </div>-->
            <!--              <div style="color:#faab46">-->
            <!--                <span>{{ '累计销售金额 ' }}</span>-->
            <!--                <span style="font-weight: bold">{{ borderData[2].value }}</span>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
        </div>

      </div>
    </div>
  </vue-fullscreen>


</template>

<script>
import dvBorderContent from "./dv-border-content.vue";
import * as echarts from 'echarts'
import {component} from 'vue-fullscreen'
import {
  getMonthlyPurchaseDetailAPI,
  getYearlyPurchaseAmountAPI,
  getMonthlyPurchaseAmountAPI,
  getYearlyPurchaseStatisticAPI,
} from "@/api/bpm/visPage";
import {toggleFullscreen} from "ele-admin";


export default {
  name: 'index',
  components: {
    dvBorderContent,
    VueFullscreen: component
  },
  computed: {
    contentWidth() {

      return this.$store.state.theme.contentWidth;
    }
  },
  watch: {
    isFullscreen: {
      handler() {
        this.isFlag = false
        this.$nextTick(() => {
          let {clientWidth: deviceWidth, clientHeight: deviceHeight} = document.documentElement;
          let eleAdminHeaderHeight = (!this.isFullscreen && document.getElementsByClassName('ele-admin-header')[0]?.offsetHeight) || 0;
          let eleAdminSidebarWidth = (!this.isFullscreen && document.getElementsByClassName('ele-admin-sidebar')[0]?.offsetWidth) || 0;
          let eleAdminTabsWidth = (!this.isFullscreen && document.getElementsByClassName('ele-admin-tabs')[0]?.offsetHeight) || 0;

          const setContainerSize = (item) => {
            item.style.height = deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
            item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
          };

          let boxContainer = [...document.getElementsByClassName('box-container')];
          boxContainer.forEach(setContainerSize);
          document.documentElement.style.fontSize = this.isFullscreen ? '24px' : '16px'

          this.isFlag = true
          this.$nextTick(() => {

            let chartDom = this.$refs.monthly_sales_volume;
            this.salesChart = echarts.init(chartDom);
            this.getMonthlySalesStatistic()
          })
        })
      }, immediate: true
    },
    contentWidth: {
      handler() {
        clearTimeout(this.resizeTimer);
        this.isFlag = false
        this.resizeTimer = setTimeout(() => {
          this.$nextTick(() => {
            let {clientWidth: deviceWidth, clientHeight: deviceHeight} = document.documentElement;
            let eleAdminHeaderHeight = (!this.isFullscreen && document.getElementsByClassName('ele-admin-header')[0]?.offsetHeight) || 0;
            let eleAdminSidebarWidth = (!this.isFullscreen && document.getElementsByClassName('ele-admin-sidebar')[0]?.offsetWidth) || 0;
            let eleAdminTabsWidth = (!this.isFullscreen && document.getElementsByClassName('ele-admin-tabs')[0]?.offsetHeight) || 0;

            const setContainerSize = (item) => {
              item.style.height = deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
              item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
            };

            let boxContainer = [...document.getElementsByClassName('box-container')];
            boxContainer.forEach(setContainerSize);
            document.documentElement.style.fontSize = this.isFullscreen ? '24px' : '16px'
            this.isFlag = true
            this.$nextTick(() => {
              let chartDom = this.$refs.monthly_sales_volume;
              this.salesChart = echarts.init(chartDom);
              this.getMonthlySalesStatistic()
            })


          })
        }, 300)
      }, immediate: true
    },
  },

  data() {
    return {
      isFullscreen: false, // 是否是全屏
      isFlag: false, // 是否展示图表
      resizeTimer: null,
      timer: null,
      date: '',
      time: '',
      week: '',
      MonthlyAmount: 0,
      YearlyAmount: 0,
      salesChart: null,
      monthlySalesVolumeOption: {
        legend: {
          left: 'center',
          selectedMode: false,
          bottom: '85%',
          itemGap: 50,
          textStyle: {
            fontSize: '0.7rem',
            color: '#fff',
            lineHeight: 0,
            padding: [10, 0, 0, 0]
          }
        },
        grid: {
          bottom: '5%',  // 组件离容器底部的距离
          containLabel: true // 包含坐标轴的标签
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            interval: 0,
            formatter: function (value, index) {
              let month = value.split('-')
              return month[1] + '月';
            },
            textStyle: {
              color: '#fff', // 修改字体颜色为红色
              fontSize: '0.7rem',
              fontFamily: 'AlibabaPuHuiTi' // 修改字体为Arial
            }
          },
          axisLine: {},
          axisTick: {}
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff', // 修改字体颜色为红色
              fontSize: '0.7rem',
              fontFamily: 'AlibabaPuHuiTi' // 修改字体为Arial
            }
          }
        },
        series: []
      },
      tableHeader: ['客户代号', '销售订单号', '采购订单', '数量', '到货情况', '入库情况', '质检状态', '合格率'],
      config: {
        header: [],
        data: [],
        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
        headerBGC: '#031d42',
        columnWidth: [110, 200],
        headerHeight: 20,
        oddRowBGC: '#031d42',
        evenRowBGC: '#031d42',
        waitTime: 5000,
        rowNum: 6
      },
      //1已检0未检
      qcStatusList: [
        {
          dictKey: 1,
          dictValue: '已检'
        },
        {
          dictKey: 0,
          dictValue: '未检'
        },
      ],
      // 1在途2提前3按时4延期
      receiveStatusList: [
        {
          dictKey: 1,
          dictValue: '在途'
        },
        {
          dictKey: 2,
          dictValue: '提前'
        },
        {
          dictKey: 3,
          dictValue: '按时'
        },
        {
          dictKey: 4,
          dictValue: '延期'
        }
      ],
      //入库状态 1已入库0未入库	integer(int32)
      inStoreStatusList: [
        {
          dictKey: 1,
          dictValue: '已入库'
        },
        {
          dictKey: 0,
          dictValue: '未入库'
        }
      ],

    };
  },
  created() {
    this.updateTimer = setInterval(this.updateTime, 1000)
  },
  mounted() {
    this.getSalesFinishList()
    this.timer = setInterval(() => {
      this.getSalesFinishList()
    }, 3600000)
  },
// 在组件销毁时清除定时器
  beforeDestroy() {
    clearInterval(this.updateTimer)
  },
  methods: {
    handelRouterTo(path) {
      window.history.pushState(null, '', path);
    },
    /* 全屏切换 */
    onFullscreen() {
      this.isFullscreen = !this.isFullscreen
    },
    //获取年度采购统计
    async getMonthlySalesStatistic() {
      let data = await getYearlyPurchaseStatisticAPI()
      let series = [
        {
          field: 'contractPrice',
          name: '采购订单金额',
          data: [],
          type: 'bar',
          itemStyle: {
            color: '#03c391'
          }
        },
        {
          field: 'qcInStorePrice',
          name: '合格入库金额',
          data: [],
          type: 'bar',
          itemStyle: {
            color: '#ea5082'
          }
        }
      ]
      this.monthlySalesVolumeOption.xAxis.data = data.map(item => item.monthStr)
      series.forEach(item => {
        item.data = data.map(i => i[item.field])
      })
      this.monthlySalesVolumeOption.series = series
      this.salesChart.setOption(this.monthlySalesVolumeOption)

    },

    // 获取销售完成列表数据
    async getSalesFinishList() {
      // customerMark	客户代号	string
      // inStoreStatus	入库状态 1已入库0未入库	integer(int32)
      // purchaseOrderCode	采购订单	string
      // qcRate	合格率	number
      // qcStatus	质检状态 1已检0未检	integer(int32)
      // receiveStatus	到货情况 1在途2提前3按时4延期	integer(int32)
      // saleOrderCode	销售订单	string

      let data = await getMonthlyPurchaseDetailAPI()
      this.config = {
        header: this.tableHeader.map(item => `<div style="color: #f4d29c;font-size: 0.9rem;font-weight: bold">${item}</div>`),
        data: data.map(item => {
          let list = []
          for (let i in item) {
            let div = ''
            if (i === 'customerMark') {
              div = `<div class="white" style="font-size: 0.8rem;">${item[i] || '-'}</div>`
              list[0] = div
            }
            if (i === 'saleOrderCode') {
              div = `<div class="white" style="font-size: 0.8rem;">${item[i] || '-'}</div>`
              list[1] = div
            }
            if (i === 'purchaseOrderCode') {
              div = `<div class="white" style="font-size: 0.8rem;">${item[i] || '-'}</div>`
              list[2] = div
            }
            if (i === 'productTotalCount') {
              div = `<div class="white" style="font-size: 0.8rem;">${item[i]||'-'}</div>`
              list[3] = div
            }
            if (i === 'receiveStatus') {
              div = `<div class="white" style="font-size: 0.8rem;">${this.getValue('receiveStatus', item[i])}</div>`
              list[4] = div

            }
            if (i === 'inStoreStatus') {
              div = `<div class="white" style="font-size: 0.8rem;">${this.getValue('inStoreStatus', item[i])}</div>`
              list[5] = div

            }
            if (i === 'qcStatus') {
              div = `<div class="white" style="font-size: 0.8rem;">${this.getValue('qcStatus', item[i])}</div>`
              list[6] = div
            }
         
            if (i === 'qcRate') {
              div = `<div class="white" style="font-size: 0.8rem;">${item[i]||0 + '%'}</div>`
              list[7] = div
            }
          }
          return list
        }) ?? [],
        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
        headerBGC: '#031d42',
        columnWidth: [],
        headerHeight: 30,
        oddRowBGC: '#031d42',
        evenRowBGC: '#031d42',
        waitTime: 5000,
        rowNum: 6,
      }

      /*年度总金额*/
      this.YearlyAmount = await getYearlyPurchaseAmountAPI()
      this.YearlyAmount = (this.YearlyAmount + '').includes('.') ? ((this.YearlyAmount.toFixed(2)) + '').padStart(8, 0) : (this.YearlyAmount + '').padStart(8, 0)
      /*月度总金额*/
      this.MonthlyAmount = await getMonthlyPurchaseAmountAPI()
      this.MonthlyAmount = (this.MonthlyAmount + '').includes('.') ? ((this.MonthlyAmount.toFixed(2)) + '').padStart(7, 0) : (this.MonthlyAmount + '').padStart(7, 0)

    },
    // 获取自定义字典值
    getValue(name, key) {
      let find = this[name + 'List'].find(item => item.dictKey == key) || {}
      return find.dictValue || ''
    },
    //实时更新日期
    updateTime() {
      let now = new Date();
      let hours = now.getHours();
      let minutes = now.getMinutes();
      let seconds = now.getSeconds();
      this.time = hours.toString().padStart(2, '0') + ":" +
        minutes.toString().padStart(2, '0') + ":" +
        seconds.toString().padStart(2, '0');

      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let day = now.getDate();
      this.date = year + '年' + month + '月' + day + '日'

      let weekInfo = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        0: '日',
      }
      this.week = '星期' + weekInfo[now.getDay()]
    }
  }
}
</script>
<style lang="scss" scoped>
[v-cloak] {
  display: none;
}

.box-container {
  font-size: 16px;
  font-family: 'AlibabaPuHuiTi';

  background: #011635;
  display: flex;
  flex-direction: column;

  .box-header {
    background-image: url("@/assets/border2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    width: 100% !important;
    height: 10%;
    justify-content: space-between;

    .title {
      font-family: '优设标题黑';
      font-size: 2.85rem;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      transform: translate(2%, -10%);
      letter-spacing: 0.4rem;
    }

    .logo {
      display: inline-block;
      width: 20%;
    }

    .time {
      width: 20%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      font-size: 0.8rem;
    }
  }

  .box-middle {
    width: 100% !important;
    height: 10% !important;
    display: flex;
    justify-content: center;
    margin: 5px 0 10px 0;

    .box-middle-content {
      width: 45%;
      height: 100%;
      background-image: url("@/assets/png/border6.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0 28px 10px 0;
      display: flex;
      align-items: center;

      .box-middle-content-left {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 1rem;
        font-weight: bold;
        color: #fff;
      }

      .box-middle-content-right {
        flex: 1;
        display: flex;
        //font-family: 'LCD2B';
        font-size: 3rem;
        color: #fff;
        justify-content: space-evenly;
        height: 61%;

        .box-border8 {
          background-image: url("@/assets/png/border8.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          width: 12%;
          display: flex;
          font-size: 3rem;
          justify-content: center;
          font-family: 'DS-DIGIT';
          align-items: center;
        }

        .border-box-content {
        }
      }
    }


  }

  .box-footer {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .box-footer-left {
      width: 100%;
      height: 50%;

      .box-echarts {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-image: url("@/assets/png/border5.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .box-echarts-top {
          background-image: url("@/assets/png/border7.png");
          background-repeat: no-repeat;
          background-size: 94% 100%;
          height: 15.5%;

          width: 100%;
          display: flex;
          align-items: center;
          /* justify-content: space-around; */
          transform: translate(2%, 20%);
          color: #fff;

          .box-top-name {
            font-family: '优设标题黑';
            transform: translateX(40%);
            display: inline-block;
            font-size: 1.8rem;

          }

          .box-top-unit {
            font-family: '优设标题黑';
            display: inline-block;
            font-size: 1rem;
            transform: translate(150%, 20%);
            letter-spacing: 0.9px;

          }
        }

        .monthly_sales_volume {
          transform: translateX(-7%);
          flex: 1;
          //width: 100%;
          //height: 100%;
          #monthly_sales_volume {
            width: 113%;
            height: 100%;
          }
        }

        .monthly_output {
          transform: translateX(-7%);
          flex: 1;

          #monthly_output {

            width: 113%;
            height: 100%;
            //width: 100%;
            //height: 100%;
          }
        }

      }
    }

    .box-footer-right {
      width: 100%;
      height: 50%;
      background-image: url("@/assets/png/border5.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .box-echarts-top {
        background-image: url("@/assets/png/border7.png");
        background-repeat: no-repeat;
        background-size: 94% 100%;
        height: 15.5%;
        width: 100%;
        display: flex;
        align-items: center;
        transform: translate(2%, 20%);
        /* justify-content: space-around; */

        color: #fff;
        font-size: 1.1rem;
        letter-spacing: 2px;

        .box-top-name {
          font-family: '优设标题黑';
          transform: translateX(40%);
          display: inline-block;
          font-size: 1.8rem;

        }
      }
    }
  }
}


</style>
<style>
.white {
  color: #ffffff;
}

.yellow {
  color: #ffd16c;
}

.green {
  color: green;
}

.red {
  color: red;
}
</style>