<template>
  <div class="testdiv">
    <!-- 查询条件 -->
    <div class="divborder newSearchDiv" style="margin: 0px">
      <!-- 产线层级 -->
      <div class="filter">
        <label>产线层级：</label>
        <Cascader
          :data="levelData"
          :value="curLevel"
          trigger="click"
          change-on-select
          class="searchSelect"
          @on-change="cascaderChange"
        ></Cascader>
      </div>
      <!-- 日期范围 -->
      <div class="filter">
        <label>日期范围：</label>
        <DatePicker
          type="month"
          :value="month"
          class="searchInput"
          @on-change="monthChange"
        ></DatePicker>
      </div>
      <!-- 按钮组 -->
      <div class="searchBtn">
        <!-- 查询按钮 -->
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search-outline"
          @click="tosearch(0)"
          >{{ $t(1001) }}</Button
        >
        <!-- 导出按钮 -->
        <Button
          type="primary"
          class="fourWord"
          icon="ios-download-outline"
          @click="tosearch(1)"
          >{{ $t(1007) }}</Button
        >
        <!-- 设置标准值按钮 -->
        <Button
          type="primary"
          class="fourWord"
          icon="ios-build-outline"
          @click="setStandard()"
          >标准值设置</Button
        >
      </div>
    </div>
    <div class="divborder newTableDiv">
      <!-- 主体表格 -->
      <Table
        id="qualityReportTable"
        class="tableClass"
        :data="tableData"
        :columns="tableColumns"
        :loading="loading"
        border
      ></Table>
      <div class="pageDiv">
      <div class="pageDirection">
        <Page
          :total="total"
          :current="page"
          @on-change="changePage"
          show-elevator
          show-sizer
          show-total
          @on-page-size-change="handlePageSize"
          :page-size-opts="[10,20,30,40,100]"
        ></Page>
      </div>
    </div>
    </div>
    <!-- 标准值设置弹框 -->
    <Modal
      class="newModalClass qualityReportModal"
      v-model="standardModal"
      :styles="{ width: '520px' }"
    >
      <p slot="header">
        <span>合格率标准值设置</span>
      </p>
      <div class="modal_body">
        <div class="standardModal">
          <div class="standard_color">
            <h4>指标颜色</h4>
            <div class="success"></div>
            <div class="warn"></div>
            <div class="error"></div>
          </div>
          <div class="standard_section">
            <h4>合格率区间</h4>
            <div>
              <InputNumber
                v-model="successMin"
                :min="0"
                :max="100"
                class="searchInput"
              />
              <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
              <InputNumber
                v-model="successMax"
                :min="0"
                :max="100"
                class="searchInput"
              />
            </div>
            <div>
              <InputNumber
                v-model="warnMin"
                :min="0"
                :max="100"
                class="searchInput"
              />
              <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
              <InputNumber
                v-model="warnMax"
                :min="0"
                :max="100"
                class="searchInput"
              />
            </div>
            <div>
              <InputNumber
                v-model="errorMin"
                :min="0"
                :max="100"
                class="searchInput"
              />
              <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
              <InputNumber
                v-model="errorMax"
                :min="0"
                :max="100"
                class="searchInput"
              />
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button size="large" @click="standardModal = false" v-text="$t('1033')"
          >取消</Button
        >
        <Button type="primary" size="large" @click="saveStandard()"
          >确认</Button
        >
      </div>
    </Modal>
    <!-- 不合格记录详情弹出框 -->
    <Modal
      class="newModalClass progressModal"
      v-model="recordModal"
      :footer-hide="true"
      :styles="{ width: '1120px' }"
    >
        <div class="modal_body recorditem">
            <div>
                <div class="title">{{machinename}}设备绩效分析</div>
                <div>
                    <span>日期：{{dateTime}}</span>
                    <div class="optionDiv">
                        <label>班次：</label>
                        <Select v-model="shift" label-in-value clearable class="searchSelect" @on-change="getDetails()">
                            <Option v-for="(item,index) in shiftList" :key="index" :value="item.id" >{{item.title}}</Option>
                        </Select>
                    </div>
                    <div class="modalcacle" @click="recordModal = false">X</div>
                </div>
            </div>
            <hr style="margin:10px 40px 10px 0;"/>
            <div class="contentEchart">
                <div class="contentLeft">
                    <span class="title">设备状态分布</span>
                    <div class="echartLeft" id="leftEch"></div>
                    <div class="jumpbuttom">
                        <Button type="primary" @click="JumpPage(1)">查看设备切片</Button>
                    </div>
                </div>
                <div class="contentLeft large">
                    <span class="title">工作模式分析</span>
                    <div class="echartLeft large" id="rightEch"></div>
                    <div class="jumpbuttom">
                        <Button type="primary" @click="JumpPage(2)">查看设备状态分析</Button>
                    </div>
                </div>
            </div>
            <div class="contentTable">
                <div class="tableLeft">
                    <span class="title">计划停机时间</span>
                    <Table
                        :data="recordTableData1"
                        :columns="recordTableColumns1"
                        :max-height="200"
                        :height="200"
                    ></Table>
                    <div class="tableText">{{bottomMessage}}</div>
                </div>
                <div class="tableLeft large">
                    <span class="title">设备产出统计</span>
                    <Table
                        :data="recordTableData2"
                        :columns="recordTableColumns2"
                        :max-height="200"
                        :height="200"
                    ></Table>
                    <div class="jumpbuttom">
                        <Button type="primary" @click="JumpPage(3)">查看设备产出</Button>
                    </div>
                </div>
            </div>
      </div>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>
<script>
import axios from "@/libs/api.request";
import echarts from "echarts";
import moment from "moment";
import { initRouter } from "@/libs/router-util"; // 新增  引入动态菜单渲染
import { localSave } from "@/libs/util";

export default {
  inject: ["reload"],
  data() {
    return {
      //  TODAY
      loading:false,
      dateTime: moment(new Date()).format('YYYY-MM-DD'),
      // 产线层级级联数据
      levelData: [],
      // 搜索条件--产线层级
      curLevel: [],
      sectionid:0,
      // 产线层级深度
      levelNums: 0,
      // 搜索条件--月份
      month: moment(new Date()).format('YYYY-MM'),
      // 搜索条件--统计维度
      // 当前选中的行数据
      row: {},
      // 主体表格数据
      page:1,
      pagesize:10,
      total:0,
      tableData: [],
      // 主体表格列字段
      tableColumns: [],
      // 不合格区间
      errorSection: localStorage.getItem("errorSection_dynamic")
        ? JSON.parse(localStorage.getItem("errorSection_dynamic"))
        : [0, 75],
      // 良好区间
      warnSection: localStorage.getItem("warnSection_dynamic")
        ? JSON.parse(localStorage.getItem("warnSection_dynamic"))
        : [75, 85],
      // 优秀区间
      successSection: localStorage.getItem("successSection_dynamic")
        ? JSON.parse(localStorage.getItem("successSection_dynamic"))
        : [85, 100],
      // 标准值设置弹框是否显示
      standardModal: false,
      // 标准值设置相关参数
      successMin: 0,
      successMax: 0,
      warnMin: 0,
      warnMax: 0,
      errorMin: 0,
      errorMax: 0,
      // 不合格记录详情弹框是否显示
      recordModal: false,
      shift:0,
      shiftList:[],
      recordTableColumns1:[
          {
              title:'休息类型',
              key:'title'
          },
          {
              title:'开始时间',
              key:'startTime'
          },
          {
              title:'结束时间',
              key:'endTime'
          },
          {
              title:'停机时长',
              key:'duration'
          }
      ],
      recordTableData1:[],
      bottomMessage:'计划停机时长：0 分钟，应运行时间：0 分钟',
      recordTableColumns2:[
          {
              title:'程序号',
              key:'program_code'
          },
          {
              title:'产品名称',
              key:'product_name'
          },
          {
              title:'产出数量',
              key:'yield'
          },
          {
              title:'加工时长',
              key:'totaltime'
          },
          {
              title:'平均加工时长',
              key:'averagetime'
          }
      ],
      recordTableData2:[],
      stateDataArr:[],//设备状态分布
      queryInfo:0,//获取跳转传过来的值
      machinename:'', //设备名称
      sectionidson:0, //弹窗sectionid
      excel:0, //导出
    };
  },
  created(){
    //获取跳转传过来的值
    let queryInfo = JSON.parse(localStorage.getItem('queryInfo'));
    localStorage.removeItem('queryInfo'); //清除缓存数据
    if(queryInfo&&queryInfo!=undefined){
      this.queryInfo = queryInfo;
      this.sectionid = queryInfo.sectionid;
    }
  },
  mounted() {
    //表格初始化
    this.baseEchartOne()
    this.baseEchartTwo()

    this.getshift() //获取班次信息
    this.tableTitle() // 获取标题
    // 获取产线层级级联数据
    this.getCascader();
    // this.tosearch(0)
  },
  methods: {
    //详情点击
    getDetails(){
        if(this.shift===null ||this.shift===undefined){
          this.shift = 0;
        }
        this.getStatedistribution();//设备状态分布
        this.getWorkingmode();//获取工作模式
        this.getDowntime();//计划停机时间
        this.getYields();//设备产出统计
    },
    JumpPage(e){
        //跳转页面
        let routeUrl;
        let pathurl = '';
        let menuname = '';
        switch(e)
        {
            case 1:
                //查看设备切片跳转
                menuname = 'cncs'
                pathurl = "/cncs/slices";
                break;
            case 2:
                //设备设备状态分析跳转
                menuname = 'cncs'
                pathurl = "/cncs/slicemode";
                break;
            case 3:
                //查看设备产出
                menuname = 'cncs'
                pathurl = "/cncs/machineoutput";
                break;
        }
        let time = moment(this.dateTime).format('YYYY-MM-DD');
        let dataTime = [time+' 00:00:00',time+' 23:59:59'];
        let data = {
          sectionid: this.sectionidson,
          datetime: dataTime
        }
        localStorage.setItem('queryInfo',JSON.stringify(data));
        
        if(menuname!=''&&pathurl!=''){
            this.changemenu(menuname).then((val) => {
                routeUrl = this.$router.resolve({
                    path: pathurl
                });
                window.open(routeUrl.href, "_blank");
            });
        }
    },
    changemenu: function (value) {
        this.$store.commit("setmenuitem", value);
        var data = {
            block: this.$store.state.user.blockitem,
        };
        initRouter(this.$store.state.user.blockitem, false); // 新增 调用方法,动态生成路由,
        localSave("sigerdatablockitem", JSON.stringify(data));
        return Promise.resolve("success");
    },
    baseEchartTwo(){
      let myechart = echarts.init(document.getElementById('rightEch'))
      let option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              // formatter: function (params) {
              //     var tar = params[1];
              //     return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
              // }
          },
          xAxis: {
              type: 'category',
              data: [],
              axisLabel: {  
                  interval:0,  
                  rotate:40,
                  formatter:function(value){
                    let namestr = value;
                    if(value.length > 5){
                      namestr = value.substring(0,5) + ' ...'
                    }
                    return namestr;
                  }   
              }
          },
          yAxis: {
              name:'时间(分钟)',
              position: 'left',//--位置靠左
              nameLocation: 'middle', //--位置居中
              nameGap: 50, //--与y轴距离
              nameRotate: 90, //--角度
              type: 'value'
          },
          grid: {
              left: 100
          },
          series: [{
              data:[],
              type: 'bar',
              // showBackground: true,
              // backgroundStyle: {
              //     color: 'rgba(220, 220, 220, 0.8)'
              // },
              label: {
                  show: true,
                  position: 'inside'
              },
              itemStyle: {
                  normal: {
                      color: function (params) {
                          // 给出颜色组
                          var colorList = [
                              "#01B13A",
                              "#4CD624",
                              "#A8DF15",
                              "#F2D418",
                              "#FFB539",
                              "#FF9C32",
                              "#FF5E31",
                              "#F05621",
                              "#DF2F1F",
                              "#F06292",
                              "#01CDD1",
                              "#A9DBFF",
                              "#1AA0FF",
                              "#7986CB",
                          ];
                          return colorList[params.dataIndex];
                      },
                  },
              },
              // 柱状图宽度
              barMaxWidth: "70",
          }]
      };
      myechart.setOption(option)
      window.onresize = ()=>{
          myechart.resize();
      };
    },
    baseEchartOne(){
        let that = this;
        var myechart = echarts.init(document.getElementById('leftEch'))
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            color:['#5cb85c','#f0ad4e','#337ab7','#d9534f','#585858'],
            legend: {
                orient: 'vertical',
                right: 50,
                bottom: 20,
                // 关机排在最后
                data: [this.$t('500041'), this.$t('500043'), this.$t('500042'), this.$t('500044'), this.$t('500040')],
                formatter:function(name){
                  let str='';
                  let data = that.stateDataArr;
                  for(var i=0;i<data.length;i++){
                    if(data[i].name == name){
                      str = data[i].value + 'h'
                    }
                  }
                  return name +' '+ str;
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 0, name: this.$t('500041')},
                        {value: 0, name: this.$t('500043')},
                        {value: 0, name: this.$t('500042')},
                        {value: 0, name: this.$t('500044')},
                        {value: 0, name: this.$t('500040')}
                    ]
                }
            ]
        };
        myechart.setOption(option);
        window.onresize = ()=>{
            myechart.resize();
        };
    },
    // 判断一个数值是否在某一个区间内
    numBetween(num, arr) {
      if (Array.isArray(arr) && arr.length == 2) {
        if (num >= arr[0] && num <= arr[1]) {
          return true;
        }
        return false;
      }
      return false;
    },
    // 选中表格一行数据
    handleRowChange(v) {
      this.row = v;
    },
    // 监听产线层级级联数据变化
    cascaderChange(v) {
      this.curLevel = v;
      this.sectionid = this.curLevel[this.curLevel.length - 1]? this.curLevel[this.curLevel.length - 1] : 0;
    },
    // 获取产线层级级联数据
    getCascader() {
      this.axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            this.levelData = data;
            let arr = [];
            if(Array.isArray(res.data.data) && res.data.data.length > 0){
                arr.push(res.data.data[0].value);
                this.sectionid = res.data.data[0].value;
                this.curLevel = arr;
            }
            if(this.queryInfo&&this.queryInfo!=undefined){
              this.sectionid = this.queryInfo.sectionid;
            }
          } 
          //查询
          this.tosearch(0);
        });
    },
    getshift(){
      this.axios
        .request({
          url: "/cnc/ProjectSectionMachine/GetClass",
          method: "get",
        })
        .then((res) => {
          let data = res.data.data;
          this.shiftList = [];
          if(res.data.ret === 1&& Array.isArray(data) && data.length){
            this.shiftList = res.data.data;
          }

        })
    },
    // 监听月份变化
    monthChange(v) {
      this.month = v;
    },
    // 获取主体表格数据
    tosearch(excel){
      this.page = 1;
      this.pagesize = 10;
      this.excel = excel;
      this.search();
    },
    search() {
      if (!this.month) {
        this.$Message.error(_this.$t('930114'));
        return false;
      }
      let data = {
        sectionID: this.sectionid,//this.sectionid
        startTime: moment(this.month).format('YYYY-MM'),
        page:this.page,
        pagesize:this.pagesize,
        toexcel:this.excel
      };
      this.loading = true;
      this.axios
        .request({
          url: "/cnc/ProductSum/EfficiencyAnalysisInfoFour",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data.data;
          this.loading = false;
          if (res.data.ret === 1) {
            if (this.excel === 1) {
              location.href = this.axios.publicPath + result;
              return false;
            }
            // 处理表格数据
            let tableData = [];
            this.total = res.data.total
            if (result && Array.isArray(result) && result.length) {
              result.forEach((v, i) => {
                let temp = {};
                temp.machine = v.title;
                if(v.eff && Array.isArray(v.eff) && v.eff.length){
                  v.eff.forEach((item,key) => {
                    let keystr = key + 1
                    temp['productivity_'+keystr] = item.productivity;
                    temp.sectionid = item.sectionID;
                  });
                }
                tableData.push(temp);
              });
            }
            this.tableData = tableData;
          } else {
            this.total = 0
            this.$Message.error(_this.$t(result.msg));
          }
        }).catch((e)=>{
          this.loading = false;
        });
    },
    tableTitle () {
        let params = {
            date: this.month
        }
        axios.request({
            url: '/config/workinggroup/GetWokingGroupDate',
            params,
            method: 'get'
        }).then(res => {
            if (res.data.ret == 1 && res.data.data.length > 0) {
                this.tilteData(res.data.data)
                this.daynums = res.data.data.length
            }
        })
    },
    tilteData (data) {
        const _this = this;
        let { numBetween, errorSection, warnSection, successSection } = this;
        this.tableColumns = [
            {
                type: 'index2',
                title: _this.$t('1008'),
                key: 'xuhao',
                render: (h, params) => {
                    return h(
                        'span',
                        params.index + (_this.page - 1) * _this.pagesize + 1
                    )
                },
                align:'center',
                width: 80
            },
            {
                title: _this.$t(960432),
                key: 'machine',
                align:'center',
                minWidth: 120
            }
        ]
        let arr = _this.tableColumns
        data.forEach((item,index) => {
            let week = ''
            switch (item.week) {
            case 0:
                week = '日';
                break;
            case 1:
                week = '一';
                break;
            case 2:
                week = '二';
                break;
            case 3:
                week = '三';
                break;
            case 4:
                week = '四';
                break;
            case 5:
                week = '五';
                break;
            case 6:
                week = '六';
                break;
            default:
                break;
            }
            arr.push({
                title: item.day + ' (' + week + ')',
                key: 'productivity_' + item.day,
                minWidth: 80,
                align:'center',
                render: (h, params) => {
                    let daynum = item.day;
                    let v = params.row[`productivity_${daynum}`];
                    let bgColor, cursor;
                    if (numBetween(v, errorSection)) {
                      // 不合格区间
                      bgColor = "#D9001B";
                      cursor = "pointer";
                    } else if (numBetween(v, warnSection)) {
                      // 良好区间
                      bgColor = "#F59A23";
                    } else if (numBetween(v, successSection)) {
                      // 优秀区间
                      bgColor = "#70B603";
                    } else {
                      // 没捕捉到的区间
                      bgColor = "#2D8CF0";
                    }
                    return h("div", {
                      style: {
                        backgroundColor: bgColor,
                        cursor: cursor || "default",
                        color: "#fff",
                        height: "36px",
                        margin:'0 -18px',
                        lineHeight: "36px",
                        textAlign: "center",
                      },
                      domProps: {
                        innerHTML: `${v}%`,
                      },
                      on: {
                        click: function () {
                          // if (numBetween(v, errorSection)) {
                            let day = daynum > 9 ? `${daynum}` : `0${daynum}`;
                            _this.dateTime = `${_this.month}-${day}`;
                            _this.sectionidson = params.row.sectionid;
                            _this.machinename = params.row.machine;
                            _this.shift = 0;
                            _this.recordModal = true;
                            _this.getDetails();
                          // }
                        },
                      },
                  });
                }
            })
        })
        this.tableColumns = arr
    },
    // 数据导出
    output() {
      this.search(1);
    },
    // 标准值设置
    setStandard() {
      // 反绑标准值数据
      this.successMin = this.successSection[0];
      this.successMax = this.successSection[1];
      this.warnMin = this.warnSection[0];
      this.warnMax = this.warnSection[1];
      this.errorMin = this.errorSection[0];
      this.errorMax = this.errorSection[1];
      // 弹框弹出
      this.standardModal = true;
    },
    // 保存标准值设置
    saveStandard() {
      let {
        successMin,
        successMax,
        warnMin,
        warnMax,
        errorMin,
        errorMax,
      } = this;
      this.successSection = [successMin, successMax];
      localStorage.setItem(
        "successSection_dynamic",
        JSON.stringify(this.successSection)
      );
      this.warnSection = [warnMin, warnMax];
      localStorage.setItem("warnSection_dynamic", JSON.stringify(this.warnSection));
      this.errorSection = [errorMin, errorMax];
      localStorage.setItem("errorSection_dynamic", JSON.stringify(this.errorSection));
      this.$Message.success(this.$t(1112));
      this.standardModal = false;
      this.reload();
    },
    //设备状态分布
    getStatedistribution(){
      var data = {
            startTime: moment(this.dateTime).format("YYYY-MM-DD"),//moment(this.dateTime).format("YYYY-MM-DD"),
            frequency:this.shift,
            sectionID: this.sectionidson,//this.sectionid,
        }
        axios.request({
            url: "/cnc/ProjectSectionMachine/MachineCanvasDataInfThree",
            data,
            method: "post",
        })
        .then((res) => {
            let info = res.data.data;
            let dataArr = [];
            let datason1 = [];
            let datason2 = [];
            let datason3 = [];
            let datason4 = [];
            let datason5 = [];
            if(res.data.ret ===1 && info!=null&&info!=undefined && info.length > 0){
                let detailinfo = info[0].data;
                datason1 = detailinfo.hour2;
                datason2 = detailinfo.hour4;
                datason3 = detailinfo.hour3;
                datason4 = detailinfo.hour5;
                datason5 = detailinfo.hour1;
            }
            dataArr.push({
              name:this.$t('500041'),
              value:datason1
            });
            dataArr.push({
              name:this.$t('500043'),
              value:datason2
            });
            dataArr.push({
              name:this.$t('500042'),
              value:datason3
            });
            dataArr.push({
              name:this.$t('500044'),
              value:datason4
            });
            dataArr.push({
              name:this.$t('500040'),
              value:datason5
            });
            this.stateDataArr = dataArr;
            //稼动率详情
            var main_test = echarts.init(document.getElementById('leftEch'));
            main_test.setOption({
                series: [
                    {
                        data: dataArr
                    }
                ]
            });
        });
    },
    //工作模式分析
    getWorkingmode(){
      var data = {
            startTime: moment(this.dateTime).format("YYYY-MM-DD"),//moment(this.dateTime).format("YYYY-MM-DD"),
            frequency:this.shift,
            sectionID: this.sectionidson,//this.sectionid,
        }
        axios.request({
            url: "/cnc/MachineWordingMode/WorkingModeAnalysisTwo",
            data,
            method: "post",
        })
        .then((res) => {
            let info = res.data.data;
            let nameArr = [];
            let dataArr = [];
            if(res.data.ret ===1 && info!=null&&info!=undefined && info.length > 0){
                info.forEach((item,index) => {
                    nameArr.push(item.abscissa);
                    dataArr.push(item.ordinate);
                });
            }
            //稼动率详情
            var main_test = echarts.init(document.getElementById('rightEch'));
            main_test.setOption({
                xAxis: {
                    data: nameArr,
                },
                series: [
                    {
                        data: dataArr
                    }
                ]
            });
        });
    },
    //获取计划停机时间
    getDowntime(){
      var data = {
            startTime: moment(this.dateTime).format("YYYY-MM-DD"),
            frequency:this.shift,
            sectionID: this.sectionidson,//this.sectionid,
        }
        axios.request({
            url: "/cnc/InformationConfiguration/ScheduledDownTime",
            data,
            method: "post",
        })
        .then((res) => {
            let info = res.data.data;
            this.recordTableData1 = []
            this.bottomMessage = '计划停机时长：0 分钟，应运行时间：0 分钟';
            if(res.data.ret ===1 && info!=null&&info!=undefined){
                this.recordTableData1 = info.list;
                this.bottomMessage = '计划停机时长：'+info.timeOne+' 分钟，应运行时间：'+info.timeTwo+' 分钟';
            }
        });
    },
    //设备产出统计
    getYields(){
      var data = {
            startTime: moment(this.dateTime).format("YYYY-MM-DD"),
            frequency: this.shift,
            sectionID: this.sectionidson,
        }
        axios.request({
            url: "/cnc/ProductSum/ListMachineYieldBySignDetailTwo",
            data,
            method: "post",
        })
        .then((res) => {
            let info = res.data.data;
            this.recordTableData2 = []
            if(res.data.ret ===1 && info!=null&&info!=undefined && info.length > 0){
                this.recordTableData2 = info;
            }
        });
    },
    changePage (value) {
        this.page = value;
        this.search();
    },
    handlePageSize (value) {
        this.pagesize = value;
        this.search();
    },
  },
};
</script>
<style lang="less">
.qualityReportModal .standardModal {
  display: flex;
  align-items: center;

  .standard_color {
    margin-right: 14px;
    width: 100px;
    text-align: center;

    > div {
      height: 29px;
      width: 80%;
      margin: 0 auto;
      margin-top: 14px;
    }
    .success {
      background-color: #70b603;
    }
    .warn {
      background-color: #f59a23;
    }
    .error {
      background-color: #d9001b;
    }
  }

    .standard_section {
            text-align: center;
            > div {
            margin-top: 14px;
            }
        }
    }

    .recorditem{
        color:black;
        .title{
            text-align:center;
            margin:-20px 0 10px 0;
            font-size:15px;
            font-weight: bold;
        }
        .optionDiv{
            display:inline-block;
            margin-left:200px;
        }
        .modalcacle{
            display: inline-block;
            position: absolute;
            top:30px;
            right: 30px;
            font-size: 15px;
            width: 20px;
            cursor: pointer;
        }
        .contentEchart{
            height:300px;
            .contentLeft{
                height:100%;
                float:left;
                position:relative;
                .echartLeft{
                    width:400px;
                    height:230px;
                }
                .large{
                    width:615px;
                }
                .jumpbuttom{
                    position:absolute;
                    right:10px;
                    bottom:10px;
                }
            }
            .large{
                margin-left:20px;
                width:615px;
            }
        }
        .contentTable{
            width:100%;
            height:260px;
            .tableLeft{
                width:400px;
                height:100%;
                float:left;
                position:relative;
                .tableText{
                    margin:10px 0px;
                }
                .jumpbuttom{
                    position:absolute;
                    right:10px;
                    bottom:0px;
                }
            }
            .large{
                margin-left:20px;
                width:615px;
            }
        }
    }
</style>
