mts / MTS-UI · Files

<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }" >
        <chart-card :loading="loading" title="工作令" :total="workNoTotal" @click.native="handlePageJump('workorder')" />
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="物料" :total="materialTotal" @click.native="handlePageJump('bom')" />
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="领料" :total="pickingTotal" @click.native="handlePageJump('MaterialCollection')"/>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="缺料" :total="materialShortageTotal" @click.native="handlePageJump('MissingMaterialsPlease')"/>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a  @click.prevent="ClickDate(1)">今日</a>
              <a  @click.prevent="ClickDate(2)">昨日</a>
              <a  @click.prevent="ClickDate(3)">本周</a>
              <a  @click.prevent="ClickDate(4)">本月</a>
              <a  @click.prevent="ClickDate(5)">上月</a>
            </div>
            <a-range-picker :style="{width: '256px'}"   @change="dateChange"/>
          </div>
          <a-tab-pane loading="true" tab="工时/人员-统计表" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="工时/人员-统计表" :dataSource="barData"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="工时排行榜" :list="barRankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane loading="true" tab="报工/人员-统计表" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <miniBar title="报工/人员-统计表" :dataSource="numData"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="报工排行榜" :list="numRankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane loading="true" tab="工作令/部门-统计表" key="3">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="工作令/工时-统计表" :dataSource="workOrderData"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="部门排行榜" :list="departmentData"/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <a-row>
      <a-col :sm="24" :md="24" :xl="18">
        <img src="~@/assets/index_home_app.jpg" width="100%" >
      </a-col>
    </a-row>

  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import Trend from '@/components/Trend'
  import { getLoginfo, getVisitInfo, getIndexTab,getWorkTime } from '@/api/api'

  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo
    },
    data() {
      return {
        loading: true,
        center: null,
        departmentData:[],
        workOrderData:[],
        barData:[],
        barRankList:[],
        numRankList:[],
        numData:[],
        loginfo:{},
        materialTotal: '',
        workNoTotal: '',
        pickingTotal: '',
        materialShortageTotal:'',
        visitFields:['ip','visit'],
        visitInfo:[],
        indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1)
      this.initLogInfo();
      this.initTabData();
    },
    methods: {
      initLogInfo () {
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
        getVisitInfo().then(res=>{
          if(res.success){
             this.visitInfo = res.result;
           }
         })
      },
      handlePageJump(pageName){
        var url;
        if (pageName == "workorder"){
          url = "/workorder/workorder"
        }
        if (pageName == "bom"){
          url = "/isystem/material";
        }
        if (pageName == "MaterialCollection"){
          url = "/material/MaterialCollection";
        }
        if (pageName == "MissingMaterialsPlease"){
          url = "/material/MissingMaterialsPlease";
        }
        this.$router.push({ path:  url});
      },
      dateChange(date, dateString){
        if (dateString[0] && dateString[1]){
          let params = {
            "startTime":dateString[0],
            "endTime":dateString[1]
          }
          this.chartDataLoading(params);
        }
      },
      ClickDate(dateType){
        let params = {
          "startTime":null,
          "endTime":null
        }
        switch (dateType){
          case 1:
            params.startTime = this.timeFormat(new Date());
            break;
          case 2:
            params.startTime = this.getYesterDay(new Date());
            params.endTime = this.timeFormat(new Date());
            break;
          case 3:
            params.startTime = this.getFirstDayOfWeek(new Date());
            params.endTime = this.timeFormat(new Date());
            break;
          case 4:
            params.startTime = this.getFirstDayOfMonth(new Date());
            params.endTime = this.timeFormat(new Date());
            break;
          case 5:
            params.startTime = this.getLastMonth(new Date());
            params.endTime = this.getFirstDayOfMonth(new Date());
            break;
        }
        this.chartDataLoading(params);
      },
      chartDataLoading(params){
        getWorkTime(params).then((res)=>{
          if (res){
            if (res.barData.length > 0){
              this.dataConversion(res.barData);
            }
            if (res.departmentData.length > 0){
              this.loadDepartmentData(res.departmentData);
            }
            if (res.workOrderData.length > 0){
              this.loadWorkOrderData(res.workOrderData);
            }
          }else {
            this.$message.warning("数据加载出错!");
          }
        });
      },
      timeFormat(date) {
        if (!date || typeof(date) === "string") {
          this.error("参数异常，请检查...");
        }
        var y = date.getFullYear(); //年
        var m = date.getMonth() + 1; //月
        var d = date.getDate(); //日
        return y + "-" + m + "-" + d;
      },
      // 获取昨日日期
      getYesterDay(date){
        var y = date.getFullYear(); //年
        var m = date.getMonth() + 1; //月
        var d = date.getDate() - 1; //日
        return y + "-" + m + "-" + d;
      },
      //获取当月第一天
      getFirstDayOfMonth (date) {
        date.setDate(1);
        return this.timeFormat(date);
      },
      // 上个月第一天
      getLastMonth(date){
        date.setMonth(date.getMonth() -1);
        date.setDate(1);
        return this.timeFormat(date);
      },
      //获取这周的周一
      getFirstDayOfWeek (date) {
        var weekday = date.getDay()||7; //获取星期几,getDay()返回值是 0（周日） 到 6（周六） 之间的一个整数。0||7为7，即weekday的值为1-7
        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
        return this.timeFormat(date);
     },
    arraySort(property){
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        if(value1 - value2>0){
          console.log(value1+"大于"+value2+"调换位置")
        }else if(value1 - value2<0){
          console.log(value1+"小于"+value2+"位置不变")
        }else{
          console.log(value1+"等于"+value2+"位置不变")
        }
        return value1 - value2
        }
    },
      dataConversion(barData){
        if (barData){
          this.barData  = this.barData.slice(0,0);
          this.numData  = this.numData.slice(0,0);
          this.barRankList  = this.barRankList.slice(0,0);
          this.numRankList  = this.numRankList.slice(0,0);
          const temp1 = [];
          const temp2 = [];
          for (let i = 0; i < barData.length; i += 1) {
            this.barData.push({
              x: barData[i].name,
              y: barData[i].totalMinutes
            })
            this.numData.push({
              x: barData[i].name,
              y: barData[i].num
            })
            temp1.push({
              name: barData[i].name,
              total: barData[i].totalMinutes
            })
            temp2.push({
              name: barData[i].name,
              total: barData[i].num
            })
          }
          temp1.reverse();
          temp2.sort(this.arraySort('total'));
          temp2.reverse();
          if (temp1.length > 6){
            temp1.splice(6,temp1.length - 1 );
            temp2.splice(6,temp2.length - 1 );
          }
          this.barRankList = temp1;
          this.numRankList = temp2;
        }
      },
      loadWorkOrderData(data){
        if (data){
          this.workOrderData  = this.workOrderData.slice(0,0);
          for (let i = 0; i < data.length; i += 1){
            this.workOrderData.push({
              x: data[i].workOrderCode,
              y: data[i].totalMinutes
            });
          }
        }
      },
      loadDepartmentData(data){
        if (data){
          this.departmentData  = this.departmentData.slice(0,0);
          for (let i = 0; i < data.length; i += 1){
            this.departmentData.push({
              name: data[i].departName,
              total: data[i].totalMinutes
            });
          }
        }
      },
      initTabData() {
        getIndexTab().then((res)=> {
          this.materialTotal = res.materialTotal
          this.workNoTotal = res.workNoTotal
          this.pickingTotal = res.pickingTotal
          this.materialShortageTotal = res.materialShortageTotal
          this.dataConversion(res.barData);
          this.loadWorkOrderData(res.workOrderData);
          this.loadDepartmentData(res.departmentData);
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>