<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">
            <el-icon class="el-icon-s-order svgIcon"></el-icon>
            <!--<svg-icon class="svgIcon" icon-class="contract"  :className="'svgIcon'"/>-->
          </div>
          <div class="totalCountWrap">
            <span class="totalCountText">本月合同数</span>
            <div class="totalCountNum">
              <span class="totalCount">{{contractTotalCurrent}}</span>
              <span>个</span>
            </div>
          </div>
        </div>
        <div class="cardsWrap" @click="toDetail('2')">
          <div class="svgIconWrap">
            <el-icon class="el-icon-menu svgIcon"></el-icon>
            <svg-icon
              class="svgIcon"
              icon-class="order"
              :className="'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">
            <el-icon class="el-icon-s-operation svgIcon"></el-icon>
          </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">
            <el-icon class="el-icon-s-claim svgIcon"></el-icon>
          </div>
          <div class="totalCountWrap">
            <span class="totalCountText">本月交付产品</span>
            <div class="totalCountNum">
              <span class="totalCount">{{selledTotalCurrent}}</span>
              <span>个</span>
            </div>
          </div>
        </div>
        <div class="cardsWrap" @click="toDetail('5')">
          <div class="svgIconWrap">
            <el-icon class="el-icon-error svgIcon"></el-icon>
          </div>
          <div class="totalCountWrap">
            <span class="totalCountText">本月不合格产品</span>
            <div class="totalCountNum">
              <span class="totalCount">{{notokTotalCurrent}}</span>
              <span>个</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="dashboardMiddle" class="dashboardMiddle">
      <div class="dashboardCardPadding">
        <div style="width: 65%;float: left;">
          <div class="CardTitleWrap">
            <span class="verticalLine"></span><span class="dashboardCardTitle">任务进度</span>
          </div>
          <div>
            <gantt
              v-if="proList.length>0"
              style="position: relative"
              :proList="proList"
              :ganttHeight="ganttHeight"
            ></gantt>
          </div>
        </div>
        <div style="width: 34%;position:relative;float: right">
          <div class="CardTitleWrap">
            <span class="verticalLine"></span><span class="dashboardCardTitle">成品率</span>
          </div>
          <div class="dashboardCardHand" style="position: absolute;top: 0;right: 10px;">
            <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>
          <div id="chartColumn" style="width:100%;" :style="{height:ganttHeight+'px'}"></div>
        </div>
      </div>
    </div>
    <el-row :gutter="5">
      <el-col :span="8">
        <div class="dashboardBottomRow">
          <div class="dashboardCardHand">
            <div class="CardTitleWrap" style="border-bottom: 0">
              <span class="verticalLine"></span><span class="dashboardCardTitle">生产设备</span>
              <span @click="refreshBottomTabel('1')">
                <el-icon class="el-icon-refresh refreshIcon"></el-icon>
              </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
              v-loading="listLoadingEm"
              small
              :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===2">
                    <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>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="dashboardBottomRow">
          <div class="dashboardCardHand">
            <div class="CardTitleWrap" style="border-bottom: 0">
              <span class="verticalLine"></span><span class="dashboardCardTitle">人员到岗</span>
              <span @click="refreshBottomTabel('2')">
                <el-icon class="el-icon-refresh refreshIcon"></el-icon>
              </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 type="index" 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_">
                <template slot-scope="scope" v-if="scope.row.dept_">{{scope.row.dept_.name}}</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="dashboardBottomRow">
          <div class="dashboardCardHand">
            <div class="CardTitleWrap" style="border-bottom: 0">
              <span class="verticalLine"></span><span class="dashboardCardTitle">提醒</span>
              <span @click="refreshBottomTabel('3')" style="cursor: pointer">
                <el-icon class="el-icon-refresh refreshIcon"></el-icon>
              </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" id="warningTabs">
              <el-tab-pane label="库存警告" name="库存警告">
                <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
                    @mouseleave="Up()">
                  <li class="listItem nearStatus" v-for="(item,$index) in warningList" :key="$index">
                    <div class="itemText">
                      <span>{{item.name}}({{item.unit}})</span><span>低于安全库存</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 nearStatus" v-for="(item,$index) in warningList" :key="$index">
                    <div class="itemText">
                      <span>{{item.number}}</span><span>接近交货日期</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 outStatus" v-for="(item,$index) in warningList" :key="$index">
                    <div class="itemText">
                      <span>{{item.name}}({{item.unit}})</span><span>已过期</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,$index) in warningList" :key="$index"
                      :class="{nearStatus:item.warningType===1,outStatus:item.warningType===2}">
                    <div class="itemText">
                      <span>{{item.name}}({{item.number}})</span>
                      <span v-if="item.warningType===1">接近校准日期</span>
                      <span v-else>已过校准日期</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,$index) in warningList" :key="$index"
                      :class="{nearStatus:item.warningType===1,outStatus:item.warningType===2}">
                    <div class="itemText">
                      <span>{{item.name}}{{item.number}}</span>
                      <span v-if="item.warningType===1">接近任务截止日期</span>
                      <span v-else>已过任务截止日期</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 {getEmployee} from "@/api/hrm";
  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,productCount} from "@/api/srm";
  import {getContractList, getOrderList} from "@/api/sam";
  import {getToken} from '@/utils/auth' // get token from cookie
  export default {
    components: {gantt},
    name: 'Dashboard',
    data() {
      return {
        animate: false,
        intNum: null,
        intNumUser: null,
        animateUser: false,
        chartColumn: null,
        week: null,
        nowHour: 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,
        selledTotalCurrent: null,//累计交付产品总数
        notokTotalCurrent: 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, create_time_start: create_time_start}).then((response) => {
          if (response.data) {
            that.contractTotalCurrent = 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;
          }
        });
        //本月交付产品&本月不合格产品
        productCount({datetime_start:create_time_start,tag:1}).then(respo=>{
          if (respo.data) {
            that.selledTotalCurrent = respo.data.count_selled;
            that.notokTotalCurrent = respo.data.count_notok;
          }
        });
        //获取不合格产品

        //获取成品率
        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) {
            that.warningList = response.data.results;
            that.warningTotal = response.data.count;
          }
        });
      },

      //设备列表
      getEquipmentList() {
        let that = this;
        this.listLoadingEm = true;
        that.equipmentPage = 1;
        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;
        that.userPage = 1;
        getEmployee({page: that.userPage, page_size: that.userPageSize,show_atwork:true}).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;
        getEmployee({
          page: val,
          show_atwork:true,
          page_size: that.userPageSize,
        }).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: {}})
        }
      },

      //图标渲染
      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轴文本颜色
              fontSize: 10,//字体大小
            },
            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'
                }]),
              }
            },
          }]
        });
      },

      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: 'sales'})
        } else if (index === '5') {
          this.$router.push({name: 'unproduct'})
        }
      },

      //选择月份
      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() {
        let that = this;
        that.warningPage = 1;
        that.warningList = [];
        if (that.activeName === '库存警告') {
          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 (that.activeName === '临近交货') {
          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 (that.activeName === '过期提醒') {
          getmaterialbatchList({page: 1, page_size: that.warningPageSize, tag: 'expired'}).then((response) => {
            if (response.data) {
              let warningList = response.data.results;
              let arr = [];
              warningList.forEach(item => {
                let obj = new Object();
                obj.name = item.material_.name;
                obj.unit = item.material_.unit;
                obj.number = item.material_.number;
                obj.id = item.id;
                obj.expiration_date = item.expiration_date;
                arr.push(obj)
              });
              that.warningList = arr;
              that.warningTotal = response.data.count;
            }
          });
        } else if (that.activeName === '设备检测') {
          that.warningPageSize = 100;
          let warningList = [];
          getpEquipmentList({page: 0, tag: 'near_done'}).then((response) => {
            if (response.data) {
              let results = response.data;
              if (results.length > 0) {
                results.forEach(item => {
                  let obj = new Object();
                  obj = item;
                  obj.warningType = 1;
                  warningList.push(obj);
                });
              }
              getpEquipmentList({page: 0, tag: 'out_done'}).then((res) => {
                if (response.data) {
                  let resData = res.data;
                  if (resData.length > 0) {
                    resData.forEach(item => {
                      let obj1 = new Object();
                      obj1 = item;
                      obj1.warningType = 2;
                      warningList.push(obj1);
                    });
                  }
                  that.warningList = warningList;
                  that.warningTotal = warningList.length;
                }
              });
            }
          });
        } else if (that.activeName === '任务到期') {
          that.warningPageSize = 100;
          let warningList = [];
          getProductionplanList({page: 0, tag: 'near_done'}).then((response) => {
            if (response.data) {
              let results = response.data;
              if (results.length > 0) {
                results.forEach(item => {
                  let obj = new Object();
                  obj = item;
                  obj.warningType = 1;
                  warningList.push(obj);
                });
              }
              getProductionplanList({page: 0, tag: 'out_done'}).then((res) => {
                if (response.data) {
                  let resData = res.data;
                  if (resData.length > 0) {
                    resData.forEach(item => {
                      let obj1 = new Object();
                      obj1 = item;
                      obj1.warningType = 2;
                      warningList.push(obj1);
                    });
                  }
                  that.warningList = warningList;
                  that.warningTotal = warningList.length;
                }
              });
            }
          });
        }
      },

      handleWarningSizeChange(val) {
        this.warningPageSize = val;
        this.warningPage = 1;
      },

      handleWarningCurrentChange(val) {
        let that = this;
        that.warningPage = val;
        if (that.activeName === '库存警告') {
          getMaterialList({page: val, page_size: that.warningPageSize, tag: 'low_inm'}).then((response) => {
            if (response.data) {
              that.warningList = response.data.results;
              that.warningTotal = response.data.count;
            }
          });
        } else if (that.activeName === '临近交货') {
          getOrderList({page: val, page_size: that.warningPageSize, tag: 'near_delivery'}).then((response) => {
            if (response.data) {
              that.warningList = response.data.results;
              that.warningTotal = response.data.count;
            }
          });
        } else if (that.activeName === '过期提醒') {
          getmaterialbatchList({page: val, page_size: that.warningPageSize, tag: 'expired'}).then((response) => {
            if (response.data) {
              that.warningList = response.data.results;
              that.warningTotal = response.data.count;
            }
          });
        }
      },

      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.per1 = item.count_ok;
                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_ok;
                  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_ok;
                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);
          }
        })
      },

      refreshBottomTabel(index) {
        if (index === '1') {//生产设备
          this.getEquipmentList();//设备列表
        } else if (index === '2') {//人员到岗
          this.getUserList();//用户列表
        } else {//提醒
          this.activeNameClick();
        }
      },

      refreshDataFrequently() {
        let that = this;
        let hasToken = getToken();
        if (hasToken) {
          this.timer = window.setInterval(() => {
            setTimeout(() => {
              if (that.nowHour > 7 && that.nowHour < 10) {
                that.getUserList();//用户列表
                that.getEquipmentList();//设备列表
                that.getGanttData();//甘特图数据
                that.getStatisticsData();//统计数据
                that.getNoticeData();//提醒列表
              } else {
                that.refreshDataSlowly();
              }
            }, 0)
          }, 120000)//2分钟
        }
      },

      refreshDataSlowly() {
        let that = this;
        let hasToken = getToken();
        if (hasToken) {
          this.timer = window.setInterval(() => {
            setTimeout(() => {
              if (that.nowHour > 7 && that.nowHour < 10) {
                that.refreshDataFrequently();
              } else {
                that.getUserList();//用户列表
                that.getEquipmentList();//设备列表
                that.getGanttData();//甘特图数据
                that.getStatisticsData();//统计数据
                that.getNoticeData();//提醒列表
              }
            }, 0)
          }, 3600000)//1小时1000*10*60
        }
      },
    },
    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 - 37;
      this.ganttHeight = domHeight + 35;
      document.getElementById('chartColumn').style.height = domHeight + 'px';
      this.getUserList();//用户列表
      this.getEquipmentList();//设备列表
      this.getGanttData();//甘特图数据
      this.getStatisticsData();//统计数据
      this.getNoticeData();//提醒列表
      let nowDate = new Date();
      let nowHour = nowDate.getHours();
      this.nowHour = nowHour;
      if (nowHour > 7 && nowHour < 10) {
        this.refreshDataFrequently();
      } else {
        this.refreshDataSlowly();
      }
    },
    beforeDestroy() {
      window.clearInterval(this.timer);
      this.timer = null;
    }
  }
</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;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }

  .dashboardBottomRow {
    margin-bottom: 0;
  }

  .dashboardCardPadding {
    overflow: hidden;
    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;
        fill: #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;
    padding-left: 1%;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;

    .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;
        }
      }
    }
  }

  .refreshIcon {
    color: #409EFF;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
  }

  .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: 12px;

      .itemText {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .nearStatus {
    color: #e6a23c;
  }

  .outStatus {
    color: #f56c6c;
  }

  #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>
