<template>
  <div class="dashboard-container">
    <div class="dashboardTopCard">
      <div class="CardTitleWrap">
        <span class="verticalLine"></span><span class="dashboardCardTitle">数据统计</span>
      </div>
      <div style="padding: 20px;overflow: hidden;">
        <div class="cardsWrap" @click="toDetail('1')">
          <div class="svgIconWrap">
            <svg-icon
              icon-class="form"
              class="svgIcon"
            />
          </div>
          <div class="totalCountWrap">
            <span class="totalCountText">本月合同数</span>
            <div class="totalCountNum">
              <span class="totalCount">{{contractTotalCurrent}}</span>
              <span>个</span>
            </div>
            <!--<div style="height: 35px;line-height: 35px;font-size: 16px;color: #333333">
              <span>本年合同总数：</span>
            </div>-->
          </div>
        </div>
        <div class="cardsWrap" @click="toDetail('2')">
          <div class="svgIconWrap">
            <svg-icon
              icon-class="form"
              class="svgIcon"
            />
          </div>
          <div class="totalCountWrap">
            <span class="totalCountText">本月生产订单数</span>
            <div class="totalCountNum">
              <span class="totalCount">{{orderTotalCurrent}}</span>
              <span>个</span>
            </div>
          </div>
        </div>
        <div class="cardsWrap" @click="toDetail('3')">
          <div class="svgIconWrap">
            <svg-icon
              icon-class="form"
              class="svgIcon"
            />
          </div>
          <div class="totalCountWrap">
            <span class="totalCountText">本月在制任务</span>
            <div class="totalCountNum">
              <span class="totalCount">{{planTotalCurrent}}</span>
              <span>个</span>
            </div>
          </div>
        </div>
        <div class="cardsWrap" @click="toDetail('4')">
          <div class="svgIconWrap">
            <svg-icon
              icon-class="form"
              class="svgIcon"
            />
          </div>
          <div class="totalCountWrap">
            <span class="totalCountText">本月交付产品</span>
            <div class="totalCountNum">
              <span class="totalCount">30</span>
              <span>个</span>
            </div>
          </div>
        </div>
        <div class="cardsWrap" @click="toDetail('5')">
          <div class="svgIconWrap">
            <svg-icon
              icon-class="form"
              class="svgIcon"
            />
          </div>
          <div class="totalCountWrap">
            <span class="totalCountText">本月不合格产品</span>
            <div class="totalCountNum">
              <span class="totalCount">30</span>
              <span>个</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="dashboardMiddle" class="dashboardMiddle">
      <el-row>
        <el-col :span="15">
          <div class="CardTitleWrap">
            <span class="verticalLine"></span><span class="dashboardCardTitle">任务进度</span>
          </div>
        </el-col>
        <el-col :span="1" style="height: 1px"></el-col>
        <el-col :span="8">
          <div class="CardTitleWrap">
            <span class="verticalLine"></span><span class="dashboardCardTitle">成品率</span>
          </div>
        </el-col>
      </el-row>
      <el-row class="dashboardCardPadding">
        <el-col :span="15">
          <div style="height: 40px;line-height: 40px;"></div>
          <div>
            <gantt
              v-if="proList.length>0"
              style="position: relative"
              :proList="proList"
              :ganttHeight="ganttHeight"
            ></gantt>
          </div>
        </el-col>
        <el-col :span="1" style="height: 1px"></el-col>
        <el-col :span="8">
          <div class="dashboardCardHand">
            <div class="dashboardCardFilter">
              <el-date-picker
                v-model="chartDate"
                type="monthrange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                format="yyyy 年 MM 月"
                value-format="yyyy-MM"
                @change="searchTimeChange('1')"
              >
              </el-date-picker>
              <div class="convenientWrap">
                <div class="convenientBtn" :class="{activeIndex:chartIndex==='1'}" @click="convenientClick('1','week')">
                  本周
                </div>
                <div class="convenientBtn" :class="{activeIndex:chartIndex==='2'}"
                     @click="convenientClick('1','month')">本月
                </div>
                <div class="convenientBtn" :class="{activeIndex:chartIndex==='3'}"
                     @click="convenientClick('1','quarter')">三个月
                </div>
              </div>
            </div>
          </div>
          <div id="chartColumn" style="width:100%;" :style="{height:ganttHeight+'px'}"></div>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="5">
      <el-col :span="8">
        <div class="dashboardBottomRow">
          <div class="dashboardCardHand">
            <div class="CardTitleWrap">
              <span class="verticalLine"></span><span class="dashboardCardTitle">生产设备</span>
            </div>
            <div class="block">
              <el-pagination
                small
                :pager-count="pageCounts"
                :current-page.sync="equipmentPage"
                :page-size="equipmentPageSize"
                layout="prev, pager, next, jumper"
                :total="equipmentTotal"
                @current-change="handleEquipmentCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
          <div class="dashboardCardPadding">
            <el-table
              small
              v-loading="listLoadingEm"
              :data="equipmentList"
              fit stripe
              size="mini"
              :height="cardTabelHeight"
              pager-count="3"
              style="border-top: 1px solid #f5f5f5;"
            >
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column label="设备编号" prop="number">
              </el-table-column>
              <el-table-column label="设备名称" prop="name" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="设备状态" prop="material_">
                <!--type=1生产设备-->
                <template slot-scope="scope">
                  <div v-if="scope.row.type===1">
                    <el-tag v-if="scope.row.state===40" type="danger">
                      禁用
                    </el-tag>
                    <el-tag v-else type="success">
                      合格
                    </el-tag>
                  </div>
                  <div v-else>
                    <el-tag v-if="scope.row.state===10" type="success">
                      {{ state_[scope.row.state] }}
                    </el-tag>
                    <el-tag v-else-if="scope.row.state===20">
                      {{ state_[scope.row.state] }}
                    </el-tag>
                    <el-tag v-else-if="scope.row.state===30" type="warning">
                      {{ state_[scope.row.state] }}
                    </el-tag>
                    <el-tag v-else type="danger">
                      {{ state_[scope.row.state] }}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="下次校准日期" prop="model">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.next_check_date" :type="setClass(scope.row.next_check_date)">
                    {{scope.row.next_check_date}}
                  </el-tag>
                  <div v-else></div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="dashboardBottomRow">
          <div class="dashboardCardHand">
            <div class="CardTitleWrap">
              <span class="verticalLine"></span><span class="dashboardCardTitle">人员到岗</span>
            </div>
            <div class="block">
              <el-pagination
                small
                :pager-count="pageCounts"
                :current-page.sync="userPage"
                :page-size="userPageSize"
                layout="prev, pager, next, jumper"
                :total="userTotal"
                @current-change="handleUserCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
          <div
            class="dashboardCardPadding"
            @mouseenter="stopScroll()"
            @mouseleave="toScroll()"
          >
            <el-table
              v-loading="listLoadingUser"
              :data="userList"
              fit stripe
              size="mini"
              :height="cardTabelHeight"
              style="border-top: 1px solid #f5f5f5;"
            >
              <el-table-column label="id" prop="id" width="50">
              </el-table-column>
              <el-table-column label="人员名称" prop="name" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="到岗情况" prop="dept_name">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.is_atwork" type="success">
                    到岗
                  </el-tag>
                  <el-tag v-else type="danger">
                    未到
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="部门" prop="dept_name">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="dashboardBottomRow">
          <div class="dashboardCardHand">
            <div class="CardTitleWrap">
              <span class="verticalLine"></span><span class="dashboardCardTitle">提醒</span>
            </div>
            <div class="block">
              <el-pagination
                small
                :pager-count="pageCounts"
                :current-page.sync="warningPage"
                :page-size="warningPageSize"
                layout="prev, pager, next, jumper"
                :total="warningTotal"
                @size-change="handleWarningSizeChange"
                @current-change="handleWarningCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
          <div class="dashboardCardPadding">
            <el-tabs type="card" :style="{height:cardTabelHeight+'px'}" v-model="activeName"
                     @tab-click="activeNameClick">
              <el-tab-pane label="库存警告" name="库存警告">
                <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
                    @mouseleave="Up()">
                  <li class="listItem" v-for="item in warningList" :key="item.id">
                    <div class="itemText">
                      <span>{{item.name}}({{item.unit}})</span><span>剩余{{item.count}},低于安全库存{{item.count_safe}}</span>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="临近交货" name="临近交货">
                <ul  :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
                     @mouseleave="Up()">
                  <li class="listItem" v-for="item in warningList" :key="item.id">
                    <div class="itemText">
                      <span>{{item.name}}({{item.number}})</span><span>{{item.delivery_date}}到交货日期</span>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="过期提醒" name="过期提醒">
                <ul  :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
                     @mouseleave="Up()">
                  <li class="listItem" v-for="item in warningList" :key="item.id">
                    <div class="itemText">
                      <span>{{item.name}}({{item.number}})</span><span>{{item.delivery_date}}到期</span>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import {mapGetters} from 'vuex';
  import {getUserList} from "@/api/user";
  import {getMaterialList} from "@/api/mtm";
  import {getProductionplanList} from "@/api/pm";
  import {getmaterialbatchList} from "@/api/inm";
  import gantt from "@/components/Gantt/dashGantt";
  import {getpEquipmentList} from "@/api/equipment";
  import {getProcessYield ,getPlanGantt} from "@/api/srm";
  import {getContractList , getOrderList} from "@/api/sam";
  export default {
    components: {gantt},
    name: 'Dashboard',
    data() {
      return {
        animate: false,
        intNum: null,
        intNumUser: null,
        animateUser: false,
        chartColumn: null,
        week: null,
        currentTime: null,
        currentYear: null,
        currentMonth: null,
        currentDay: null,
        pageCounts: 5,
        userPage: 1,
        userPageSize: 10,
        userTotal: 0,
        equipmentPage: 1,
        equipmentPageSize: 10,
        equipmentTotal: 0,
        warningPage: 1,
        warningPageSize: 10,
        warningTotal: 0,
        tableIndex: null,
        chartIndex: null,
        tableDate: '2021-12',
        chartDate: [],
        proList: [],
        userList: [],
        warningList: [],
        equipmentList: [],
        list: [
          {id: 1, name: 'HIehd91', card: '3337', sco: 'REF-32'},
          {id: 2, name: 'HIehd92', card: '3337', sco: 'REF-32'},
          {id: 3, name: 'HIehd93', card: '3337', sco: 'REF-32'},
          {id: 4, name: 'HIehd94', card: '3337', sco: 'REF-32'},
          {id: 5, name: 'HIehd95', card: '3337', sco: 'REF-32'},
          {id: 6, name: 'HIehd96', card: '3337', sco: 'REF-32'},
          {id: 7, name: 'HIehd97', card: '3337', sco: 'REF-32'},
        ],
        state_: {
          10: '完好',
          20: '限用',
          30: '在修',
          40: '禁用',
        },
        options: {
          "1": '成品',
          "2": '半成品',
          "3": '主要原料',
          "4": '辅助材料',
          "5": '加工工具',
          "6": '辅助工装',
        },
        activeName: '库存警告',
        chartData: {
          xAxisData: ["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
          seriesData: [80, 95, 96, 96, 96, 98, 99, 100],
        },
        contractTotalCount: null,//合同总数
        contractTotalCurrent: null,
        orderTotalCount: null,//生产订单总数
        orderTotalCurrent: null,
        planTotalCount: null,//已排产任务总数
        planTotalCurrent: null,
        rderTotalCount: null,//累计交付产品总数
        derTotalCount: null,//累计不合格产品总数
        listLoadingPlan: false,
        listLoadingEm: false,
        listLoadingUser: false,
        cardTabelHeight: null,
        ganttHeight: 0,
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'perms',
        'count'
      ])
    },
    watch: {
      '$route.path': function (newVal) {
        if(newVal==='/dashboard') {
          this.getUserList();//用户列表
          this.getEquipmentList();//设备列表
          this.getGanttData();//甘特图数据
          this.getStatisticsData();//统计数据
          this.getNoticeData();//提醒列表
        }
      }
    },
    methods: {
      setClass:function(check_date) {
        let obj = {};
        if(check_date!=null){
          let dat = new Date();
          let time = dat.getTime();
          let check = new Date(check_date).getTime();
          let timeDiffer = (check-time)/1000/60/60/24;
          if (4>timeDiffer&&timeDiffer>0) {
            obj = 'warning';
          }else if (timeDiffer<0) {
            obj = "danger";
          }
        }
        return obj;
      },
      getNoticeData() {
        this.ScrollUp();
      },
      ScrollUp() {
        let that = this;
        that.intNum = setInterval(() => {
          if(that.warningList.length>3){
            that.animate = true;
            setTimeout(() => {
              that.warningList.push(that.warningList[0]);
              that.warningList.shift();
              that.animate = false;
            }, 3000)
          }
        }, 3000);
      },
      //鼠标移上去停止
      Stop() {
        clearInterval(this.intNum);
      },
      Up() {
        this.ScrollUp();
      },
      getStatisticsData() {
        let that = this;
        let dat = new Date();
        that.week = dat.getDay();
        that.currentTime = dat.getTime();
        that.currentYear = dat.getFullYear();
        let month = dat.getMonth() + 1;
        that.currentMonth = month > 9 ? month : '0' + month;
        that.currentDay = dat.getDate();
        let create_time_start = that.currentYear + '-' + that.currentMonth + '-01';
        //获取合同数
        getContractList({page: 1, page_size: 1}).then((response) => {
          if (response.data) {
            that.contractTotalCount = response.data.count;
          }
        });
        getContractList({page: 1, page_size: 1, create_time_start: create_time_start}).then((response) => {
          if (response.data) {
            that.contractTotalCurrent = response.data.count;
          }
        });
        //获取生产订单数
        getOrderList({page: 1, page_size: 1}).then((response) => {
          if (response.data) {
            that.orderTotalCount = response.data.count;
          }
        });
        getOrderList({page: 1, page_size: 1, create_time_start: create_time_start}).then((response) => {
          if (response.data) {
            that.orderTotalCurrent = response.data.count;
          }
        });
        //获取已排产任务
        getProductionplanList({page: 1, page_size: 1}).then((response) => {
          if (response.data) {
            that.planTotalCount = response.data.count;
          }
        });
        getProductionplanList({page: 1, page_size: 1, tag: 'working'}).then((response) => {
          if (response.data) {
            that.planTotalCurrent = response.data.count;
          }
        });
        //获取交付产品

        //获取不合格产品

        //获取成品率
        let d = new Date(that.currentYear, month, 0);
        let days = d.getDate();
        let start = that.currentYear + '-' + that.currentMonth;
        let startDate = start + '-01';
        let endDate = start + '-' + days;
        that.chartDate = [start, start];
        getProcessYield({datetime_start: startDate, datetime_end: endDate}).then((response) => {
          if (response.data) {
            let list = response.data;
            let xAxisData = [], seriesData = [];
            list.forEach(item => {
              xAxisData.push(item.name);
              let rate = item.rate * 100;
              seriesData.push(rate.toFixed(2))
            });
            that.chartData.xAxisData = xAxisData;
            that.chartData.seriesData = seriesData;
            this.drawChart();
          }
        });

        //获取库存警告
        getMaterialList({page: 1, page_size:that.warningPageSize,tag: 'low_inm'}).then((response) => {
          if (response.data) {
            debugger;
            that.warningList = response.data.results;
            that.warningTotal = response.data.count;
          }
        });
      },
      //设备列表
      getEquipmentList() {
        let that = this;
        this.listLoadingEm = true;
        getpEquipmentList({page: that.equipmentPage, page_size: that.equipmentPageSize}).then((response) => {
          if (response.data) {
            that.equipmentList = response.data.results;
            that.equipmentTotal = response.data.count;
          }
          that.listLoadingEm = false;
        });
      },
      //设备分页跳转
      handleEquipmentCurrentChange(val) {
        let that = this;
        that.listLoadingEm = true;
        that.equipmentPage = val;
        getpEquipmentList({page: val, page_size: that.equipmentPageSize}).then((response) => {
          if (response.data) {
            that.equipmentList = response.data.results;
            that.equipmentTotal = response.data.count;
          }
          that.listLoadingEm = false;
        });
      },
      //用户列表
      getUserList() {
        let that = this;
        that.listLoadingUser = true;
        getUserList({page: that.userPage, page_size: that.userPageSize, fields: 'id,name,dept_name,is_atwork'}).then((response) => {
          if (response.data) {
            that.userList = response.data.results;
            that.userTotal = response.data.count;
            that.userScroll();
          }
          that.listLoadingUser = false;
        });
      },
      //用户分页跳转
      handleUserCurrentChange(val) {
        let that = this;
        that.listLoadingUser = true;
        that.userPage = val;
        getUserList({page: val, page_size: that.userPageSize, fields: 'id,name,dept_name,is_atwork'}).then((response) => {
          if (response.data) {
            that.userList = response.data.results;
            that.userTotal = response.data.count;
            that.userScroll();
          }
          that.listLoadingUser = false;
        });
      },
      userScroll() {
        let that = this;
        that.intNumUser = setInterval(() => {
          that.animateUser = true;
          setTimeout(() => {
            that.userList.push(that.userList[0]);
            that.userList.shift();
            that.animateUser = false;
          }, 3000)
        }, 3000);
      },
      //鼠标移上去停止
      stopScroll() {
        clearInterval(this.intNumUser);
      },
      toScroll() {
        this.userScroll();
      },
      //去往工作流页面
      gotoTicketPage() {
        let path = this.$route.path;
        if (path === '/workflow/ticket') {
          this.$message.success("已在当前页面");
        } else {
          this.$router.push({name: 'ticket', params: {}})
        }
      },
      //任务排期列表
      /*getPlanList() {
        let that = this;
        this.listLoadingPlan = true;
        getProductionplanList({page: 0}).then((response) => {
          if (response.data) {
            that.planList = response.data;
          }
          this.listLoadingPlan = false;
        });
      },*/
      //库存列表
      /*getStockList() {
        let that = this;
        this.listLoadingStock = true;
        getInventoryList({page: this.stockPage, page_size: this.stockPageSize}).then((response) => {
          if (response.data) {
            that.stockList = response.data.results;
            that.stockTotal = response.data.count;
          }
          this.listLoadingStock = false;
        });
      },
      //更多库存
      stockMore() {
        this.$router.push({name: 'warehouse', params: {}})
      },
       //库存pageSize改变
      // @size-change="handleStockSizeChange"
      handleEquipmentSizeChange(val) {
        this.stockPageSize = val;
        this.stockPage = 1;
      },
      */
      //图标渲染
      drawChart() {
        let that = this;
        this.chartColumn = echarts.init(document.getElementById('chartColumn'));
        this.chartColumn.setOption({
          // title: { text: '成品率' },
          grid: {
            top: '10%',
            left: '3%',
            right: '5%',
            bottom: '1%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item',
            /* formatter(params){
              for(let x in params){
                return params[x].name +":"+params[x].data+"%";
              }
            }*/
            formatter: function (params) {
              let color = params.color;//图例颜色
              let htmlStr = '<div>';
              htmlStr += params.name + '<br/>';
              htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
              htmlStr += params.seriesName + '：' + params.value + '%';
              htmlStr += '</div>';
              return htmlStr;
            }
          },
          xAxis: {
            // name:'工序',
            axisTick: {
              show: false
            },
            splitLine: {
              show: false, //去掉X轴分割线
            },
            data: that.chartData.xAxisData,
          },
          yAxis: {
            axisLine: {
              show: true,//y轴线
            },
            axisTick: {
              show: false//Y轴刻度线
            },
            axisLabel: {
              color: '#333333'//Y轴文本颜色
            },
            splitLine: {
              show: true, //Y轴分割线
              lineStyle: {
                color: '#dddddd'//Y轴分割线颜色
              }
            },
          },
          series: [{
            name: '成品率',
            type: 'bar',
            barWidth: 20,
            data: that.chartData.seriesData,
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              formatter: '{c}%',//显示百分号
              textStyle: { //数值样式
                color: 'black',//字体颜色
                fontSize: 10//字体大小
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#adcff3'
                }, {
                  offset: 1,
                  color: '#409EFF'
                }]),

                /*color: function(params) {
                  let colorList = [
                    ['#5fcdc2','#ffffff'],
                    ['#FFA783','#ffffff'],
                    ['#D099FF','#ffffff'],
                    ['#83FFC0','#ffffff'],
                    ['#FF83D8','#ffffff'],
                    ['#FFE899','#ffffff'],
                    ['#83FFE9','#ffffff'],
                  ];
                  let colorItem = colorList[params.dataIndex];
                  return new echarts.graphic.LinearGradient(0,1,0,0,[
                    {
                      color: colorItem[0]
                    },
                    {
                      color: colorItem[1]
                    }
                  ]);
                },*/
                /*color: function(params) {
                let colorList = [
                  '#5fcdc2','#a378e4','#fea94c','#f27197',
                  '#409eff','#5fcdc2','#a378e4','#fea94c'
                ];
                return colorList[params.dataIndex]
              },*/
              }
            },
          }]
        });
      },

      toDetail(index) {
        if (index === '1') {
          this.$router.push({name: 'contract', params: {page: 1, page_size: 20}})
        } else if (index === '2') {
          this.$router.push({name: 'order', params: {page: 1, page_size: 20}})
        } else if (index === '3') {
          this.$router.push({name: 'management', params: {page: 1, page_size: 20}})
        } else if (index === '4') {
          this.$router.push({name: 'product'})
        } else if (index === '5') {
          this.$router.push({name: 'unproduct'})
        }
      },
      //便捷查询按钮
      convenientClick(index, type) {
        let that = this;
        let startTime = '', endTime = '', activeIndex = '1';
        let dat = new Date();
        let week = dat.getDay();//0-6
        let currentTime = dat.getTime();
        let currentYear = dat.getFullYear();
        let currentMonth = dat.getMonth() + 1;
        let currentDay = dat.getDate();
        endTime = currentYear + '-' + currentMonth + '-' + currentDay;
        if (type === 'week') {
          activeIndex = '1';
          let num = week === 0 ? 6 : week - 1;
          let time = currentTime - num * 24 * 60 * 60 * 1000;
          let start = new Date(time);
          startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        } else if (type === 'month') {
          activeIndex = '2';
          startTime = currentYear + '-' + currentMonth + '-01';
        } else if (type === 'quarter') {
          activeIndex = '3';
          let mon = null, yea = null;
          if (currentMonth > 2) {
            mon = currentMonth - 2;
            yea = currentYear;
          } else if (currentMonth === 2) {
            mon = 12;
            yea = currentYear - 1;
          } else if (currentMonth === 1) {
            mon = 11;
            yea = currentYear - 1;
          }
          startTime = yea + '-' + mon + '-01';
        }
        if (index === '1') {
          this.chartIndex = activeIndex;
          getProcessYield({datetime_start: startTime, datetime_end: endTime}).then((response) => {
            if (response.data) {
              let list = response.data;
              let xAxisData = [], seriesData = [];
              list.forEach(item => {
                xAxisData.push(item.name);
                let rate = item.rate * 100;
                seriesData.push(rate.toFixed(2))
              });
              that.chartData.xAxisData = xAxisData;
              that.chartData.seriesData = seriesData;
              this.drawChart();
            }
          });
        }
        //根据时间和类型获取数据
      },
      //选择月份
      searchTimeChange(index) {
        let that = this;
        let startDate = '', endDate = '';
        let year = null, month = null, days = null;
        if (index === '1') {
          this.tableIndex = null;
          startDate = that.chartDate[0] + '-01';
          year = that.chartDate[1].split("-")[0];
          month = that.chartDate[1].split("-")[1];
          let d = new Date(year, month, 0);
          days = d.getDate();
          endDate = this.tableDate + '-' + days;
          getProcessYield({datetime_start: startDate, datetime_end: endDate}).then((response) => {
            if (response.data) {
              let list = response.data;
              let xAxisData = [], seriesData = [];
              list.forEach(item => {
                xAxisData.push(item.name);
                let rate = item.rate * 100;
                seriesData.push(rate.toFixed(2))
              });
              that.chartData.xAxisData = xAxisData;
              that.chartData.seriesData = seriesData;
              this.drawChart();
            }
          });
        }
      },
      //提示
      activeNameClick(tab) {
        debugger;
        debugger;
        let that = this;
        that.warningPage = 1;
        that.warningList = [];
        if (tab.label === '库存警告') {
          getMaterialList({page: 1, page_size:that.warningPageSize, tag: 'low_inm'}).then((response) => {
            if (response.data) {
              that.warningList = response.data.results;
              that.warningTotal = response.data.count;
            }
          });
        } else if (tab.label === '临近交货') {
          getOrderList({page: 1, page_size:that.warningPageSize,tag:'near_delivery'}).then((response) => {
            if (response.data) {
              that.warningList = response.data.results;
              that.warningTotal = response.data.count;
            }
          });
        } else if (tab.label === '过期提醒') {
          getmaterialbatchList({page: 1, page_size:that.warningPageSize, tag: 'expired'}).then((response) => {
            if (response.data) {
              that.warningList = response.data.results;
              that.warningTotal = response.data.count;
            }
          });
        }
      },
      handleWarningSizeChange(val) {
        this.warningPageSize = val;
        this.warningPage = 1;
      },
      handleWarningCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      getGanttData() {
        let that = this;
        getPlanGantt({}).then(res => {
          if (res.code === 200) {
            let arr = [];
            let list = res.data.results;
            list.forEach(item => {
              if (!item.children || item.children.length < 1) {
                let startTime = new Date(item.start_date).getTime();
                let endTime = new Date(item.end_date).getTime();
                let obj = new Object();
                obj.name = item.number;
                obj.id = item.id;
                obj.top = 20;
                obj.startTime = startTime;
                obj.endTime = endTime;
                obj.planTime = [startTime, endTime];
                obj.per = item.count;
                obj.type = 1;
                obj.productName = item.product_.name;
                obj.productNum = item.product_.specification;
                obj.isShow = true;
                arr.push(obj);
              } else if (item.children && item.children.length >= 1) {
                let startTime = new Date(item.start_date).getTime();
                let endTime = new Date(item.end_date).getTime();
                let temp = [];
                let parentId = item.id;
                let children = item.children;
                children.forEach(child => {
                  let start = new Date(child.start_date).getTime();
                  let end = new Date(child.end_date).getTime();
                  let objChild = new Object();
                  objChild.name = child.number;
                  objChild.id = child.id;
                  objChild.top = 50;
                  objChild.parentId = parentId;
                  objChild.startTime = start;
                  objChild.endTime = end;
                  objChild.planTime = [start, end];
                  objChild.per = child.count;
                  objChild.per1 = child.count_real;
                  objChild.type = 1;
                  objChild.productName = child.product_.name;
                  objChild.productNum = child.product_.specification;
                  objChild.isShow = true;

                  temp.push(objChild);
                });
                let obj = new Object();
                obj.name = item.number;
                obj.id = item.id;
                obj.top = 20;
                obj.startTime = startTime;
                obj.endTime = endTime;
                obj.planTime = [startTime, endTime];
                obj.per = item.count;
                obj.per1 = item.count_real;
                obj.type = 3;
                obj.productName = item.product_.name;
                obj.productNum = item.product_.specification;
                obj.children = temp;
                obj.isShow = true;
                arr.push(obj);
              }
              that.proList = arr;
            });
          } else {
            that.$message.error(res.msg);
          }
        })
      },
    },
    mounted() {
      let hei = document.getElementsByClassName('app-main')[0].clientHeight;
      let heig = document.getElementsByClassName('dashboardTopCard')[0].clientHeight;
      let domHeight = ((hei - heig - 140) / 2);
      this.cardTabelHeight = domHeight-35;
      this.ganttHeight = domHeight - 10;
      document.getElementById('chartColumn').style.height = domHeight + 'px';
      this.getUserList();//用户列表
      this.getEquipmentList();//设备列表
      this.getGanttData();//甘特图数据
      this.getStatisticsData();//统计数据
      this.getNoticeData();//提醒列表
    },
  }
</script>
<style lang="scss" scoped>
  .el-card.is-always-shadow {
    height: auto !important;
  }
  .dashboard-container {
    margin: 5px 6px;
  }
  .dashboardTopCard, .dashboardMiddle, .dashboardBottomRow {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 5px;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }
  .dashboardBottomRow {
    margin-bottom: 0;
  }
  .dashboardCardPadding {
    padding: 5px 20px 20px 20px;
  }
  /**/
  .cardsWrap {
    display: flex;
    width: 20%;
    color: #777777;
    float: left;
    font-size: 14px;
  }
  .svgIconWrap {
    margin-right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    text-align: center;
    .svgIcon {
      font-size: 24px;
      margin-top: 13px
    }
  }
  .cardsWrap:nth-child(1) {
    .svgIconWrap {
      background: #e9f3ff;

      .svgIcon {
        color: #409EFF;
      }
    }
  }
  .cardsWrap:nth-child(2) {
    .svgIconWrap {
      background: #fff1de;
      .svgIcon {
        color: #ffb23f;
      }
    }
  }
  .cardsWrap:nth-child(3) {
    .svgIconWrap {
      background: #d9f6d8;
      .svgIcon {
        color: #54cb48;
      }
    }
  }
  .cardsWrap:nth-child(4) {
    .svgIconWrap {
      background: #f0e8fd;
      .svgIcon {
        color: #a378e4;
      }
    }
  }
  .cardsWrap:nth-child(5) {
    .svgIconWrap {
      background: #f7e5ea;
      .svgIcon {
        color: #f27197;
      }
    }
  }
  .totalCountText {
    height: 20px;
    line-height: 20px
  }
  .totalCountNum {
    height: 30px;
  }
  .totalCount {
    font-size: 25px;
    font-weight: bold;
    color: #626262;
  }
  /**/
  .CardTitleWrap {
    display: flex;
    height: 35px;
    line-height: 35px;
    padding-left: 1%;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f5f5;
    /*padding-top: 6px;*/
    .verticalLine {
      width: 4px;
      height: 15px;
      background: #409EFF;
      margin-right: 7px;
      margin-top: 8px;
    }
    .dashboardCardTitle {
      height: 34px;
      line-height: 34px;
      font-size: 14px;
      font-weight: bold;
      width: 70px;
      vertical-align: middle;
      margin-right: 7px;
    }
    .stockMore {
      font-size: 12px;
      font-weight: normal;
      color: #409EFF;
      cursor: pointer;
    }
  }
  /*成品率筛选条件*/
  .dashboardCardHand {
    display: flex;
    justify-content: space-between;
    .dashboardCardFilter {
      display: flex;
      .convenientWrap {
        display: flex;
        border: 1px solid #DCDFE6;
        border-radius: 6px;
        height: 30px;
        line-height: 30px;
        margin-left: 10px;
        font-size: 12px;
        .convenientBtn {
          cursor: pointer;
          width: 50px;
          text-align: center;
          border-right: 1px solid #DCDFE6;
        }
        .convenientBtn:last-child {
          border-right: 0;
          border-radius: 0 6px 6px 0;
        }
        .convenientBtn:first-child {
          border-radius: 6px 0 0 6px;
        }
        .activeIndex {
          color: #ffffff;
          background: #409EFF;
        }
      }
    }
  }
  .anim {
    transition: all 0.5s;
    margin-top: -35px; //高度等于行高
  }
  .lists {
    height: 100%;
    line-height: 35px;
    transition: top 0.5s;
    overflow-y: scroll;
    padding-right: 40px;
    margin: 0 !important;
    .listItem {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      .itemText {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  #chartColumn > div {
    height: 100% !important;
    canvas {
      height: 100% !important;
    }
  }
  #dashboardMiddle .el-range-editor--medium.el-input__inner,
  #dashboardMiddle .el-range-editor.el-input__inner {
    height: 30px !important;
  }
</style>
