<template>
  <div class="examination" style="margin-top: 5px;">
    <!-- 委托下发量 -->
    <div style="float: left;width: 24%; height: 150px;background-color: #f2f6fc;border-radius: 10px;margin-left: 5px;">
      <div style="float: left;width: 50%;height: 100%;">
        <div style="height: 25%;text-align: center;margin-top: 10px;">
          <span>委托下发量</span>
        </div>
        <div style="height: 25%;text-align: center;">
          <strong style="font-weight: 900;font-size:16px;">下发：{{ this.xia }}</strong>
        </div>
        <div style="height: 25%;text-align: center;margin-top: -15px;">
          <strong style="font-weight: 900;font-size:16px;">生成：{{ this.sheng }}</strong>
        </div>
        <div style="height: 25%;text-align: center;margin-top: -15px;">
          <strong style="font-weight: 900;font-size:16px;">未生成：{{ this.wei }}</strong>
        </div>
      </div>
      <div class="echart" id="mychart" :style="myChartStyle"></div>
    </div>

    <!-- 检验样品量 -->
    <div style="float: left;width: 24%; height: 150px;background-color: #f2f6fc;;border-radius: 10px;margin-left: 5px;">
      <div style="float: left;width: 50%;height: 100%;">
        <div style="height: 25%;text-align: center;margin-top: 10px;">
          <span>检验样品量</span>
        </div>
        <div style="height: 25%;text-align: center;">
          <strong style="font-weight: 900;font-size:16px;">成品：{{ this.chengpin }}</strong>
        </div>
        <div style="height: 25%;text-align: center;margin-top: -15px;">
          <strong style="font-weight: 900;font-size:16px;">原料：{{ this.yuanliao }}</strong>
        </div>
      </div>
      <div class="echart" id="mychart1" :style="myChartStyle"></div>
    </div>


    <!-- 检验样品趋势 -->
    <div style="float: right;width: 50.8%; height: 150px;background-color: #f2f6fc;border-radius: 10px;">
      <div style="float: left;width: 15%;height: 100%;">
        <div style="height: 25%;text-align: center;margin-top: 10px;">
          <span>检验样品趋势</span>
        </div>
      </div>
      <div class="line" id="lineChart" :style="myChartStyleRight"></div>
    </div>


    <!-- 样品分类检验量 -->
    <div class="emiddle" id="middle" style="float: left;width: 59%; height: 250px;border-radius: 10px;background-color: #f2f6fc;
        margin-top: 6px;margin-left: 5px;">
      <div style="height: 10%;border-bottom: 1px solid;margin-top: 10px;">
        <div style="float: left;width: 30%;margin-left: 25px;">样品分类检验量</div>
        <div style="float: right;width: 25%;">统计日期:{{ this.getYNM(new Date) }}</div>
      </div>
      <div class="echart" id="mychart2" :style="StyleMiddleLeft"></div>
    </div>

    <div class="emiddle1" id="middle1" style="float: right; width: 40%; height: 760px;overflow: auto; border:1px solid; background-color: #f2f6fc;
        margin-top: 6px;margin-left: 5px; border-radius: 10px;">
      <!-- <el-table
                ref="dataTable2"
                :data="table">
                <el-table-column type="index" label="NO" fixed="left" align="center" width="45"></el-table-column>
                <el-table-column min-width="50px" prop="listName" label="任务名称" align="center"></el-table-column>
                <el-table-column min-width="50px" prop="listCount" label="个数" align="center"></el-table-column>
            </el-table> -->
      <div style="height: 3.4%;border-bottom: 1px solid;margin-top: 8px;">
        <div style="float: left;width: 50%;margin-left: 25px;">任务超时明细表&nbsp;&nbsp;&nbsp; 带*的是ERP</div>
        <div>
          <!-- <select id="d6" style="width:100px">
                        <option value="1">ERP</option>
                        <option value="2">内部样</option>
                    </select> -->
          <el-select v-model="codeV" @change="selectSection" style="width:30%;margin-top: -10px;" size="small">
            <el-option v-for="item in Type" :key="item.orgCode" :label="item.orgName" :value="item.orgCode">
            </el-option>
          </el-select>
        </div>
      </div>
      <table border="1" style="margin-top: 5px;margin-left: 5px;">
        <thead>
          <tr style="height: 35px;text-align: center;font-size: 16px;font-weight: 800;">
            <td style="width: 50px;">序号</td>
            <td style="width: 130px;">任务日期</td>
            <td style="width: 150px;">物料名称</td>
            <td style="width: 200px;">任务名称</td>
            <td style="width: 80px;">领用人</td>
            <td style="width: 100px;">中心编号</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(col, index) in listMap" style="text-align: center;">
            <td v-if="col.AAA == '~~'" style="background-color: red;">{{ index }}</td>
            <td v-else-if="col.AAA == '~'" style="background-color: yellow;">{{ index }}</td>
            <td v-else>{{ index }}</td>
            <td>{{ col.DATA }}</td>
            <td>{{ col.MAT_NAME }}</td>
            <td>{{ col.TEST_ITEM_NAME }}</td>
            <td>{{ col.CREATE_MAN }}</td>
            <td><span @click.stop="showHistory(col.SAMPLE_NO)">{{ col.SAMPLE_NO }}</span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-dialog class="testManagement-pllr" :close-on-click-modal="false" @close="closeTemperature" width="70%"
      :visible.sync="temperatureShow">
      <div class="common-table-div">
        <el-table border :data="tableData">
          <el-table-column show-overflow-tooltip sortable align="center" prop="TEST_ITEM_NAME"
            label="任务名称"></el-table-column>
          <el-table-column show-overflow-tooltip sortable align="center" prop="AAA" label="一级状态"></el-table-column>
          <el-table-column show-overflow-tooltip sortable align="center" prop="BBB" label="二级状态"></el-table-column>
          <el-table-column show-overflow-tooltip sortable align="center" prop="CCC" label="三级状态"></el-table-column>
          <el-table-column show-overflow-tooltip sortable align="center" prop="DDD" label="三级状态"></el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 检验任务完成情况 -->
    <div class="ebottom" id="bottom" style="float: left;width: 59%; height: 250px;border-radius: 10px;background-color: #f2f6fc;
        margin-top: 6px;margin-left: 5px;">
      <div style="height: 10%;border-bottom: 1px solid;margin-top: 10px;">
        <div style="float: left;width: 30%;margin-left: 25px;">检验任务完成情况</div>
        <div style="float: right;width: 25%;">统计日期:{{ this.getYNM(new Date) }}</div>
      </div>
      <div class="echart" id="mychart3" :style="StyleMiddleLeft"></div>
    </div>

    <!-- <div class="ebottom1" id="bottom1" :style="StyleMiddleRight">

        </div> -->

    <!-- 任务超时数量趋势图 -->
    <div class="ebottom" id="bottom" style="float: left;width: 59%; height: 250px;border-radius: 10px;background-color: #f2f6fc;
        margin-top: 6px;margin-left: 5px;">
      <div style="height: 10%;border-bottom: 1px solid;margin-top: 10px;">
        <div style="float: left;width: 30%;margin-left: 25px;">任务超时数量趋势图 - 15天</div>
      </div>
      <div class="echart" id="lineChart1" :style="StyleMiddleLeft"></div>
    </div>
  </div>
</template>
<script>
import {
  getCookie,
  formatDate
} from '@/utils/util.js';
import * as echarts from "echarts";
import {
  cookieUserId,
  cookieUserName
} from '@/config/config.js';
let userName = getCookie(cookieUserName);
let userId = getCookie(cookieUserId);
export default {
  data() {
    return {
      xia: '',
      sheng: '',
      wei: '',
      chengpin: '',
      yuanliao: '',
      temperatureShow: false,
      tableData: [],

      xData: ["Mon", "Tue"], //横坐标
      yData: [23, 24], //数据
      myChartStyle: { float: "right", width: "50%", height: "100%" }, //图表样式
      myChartStyleRight: { float: "right", width: "85%", height: "150px" },

      StyleMiddleLeft: { width: "100%", height: "90%" },

      listName: [],
      listCount: [],
      listMap: [],
      codeV: '1',
      Type: [{ orgCode: "1", orgName: "ERP" }, { orgCode: "2", orgName: "内部样" }]
    }
  },
  created() {
  },
  mounted() {
    this.initEcharts();
    this.chaoshi();
  },
  methods: {
    selectSection() {
      this.chaoshi();
    },
    getYNM(date) {
      let year = date.getFullYear().toString();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      return `${year}-${month}-${day}`;
    },
    showHistory(row) {
      this.temperatureShow = true;
      this.axios.post('pass/baseManagement/v1/businessKanbans/taskSituation', { sampleNo: row }, { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.tableData = res.data
        } else {
          this.$message.error(res.message);
        }
      }).catch(e => {
        this.$message.error(res.message);
      });
    },
    closeTemperature() {
      this.temperatureShow = false;
    },
    initEcharts() {
      const myChart = echarts.init(document.getElementById("mychart"));
      this.axios.get('pass/baseManagement/v1/businessKanbans/getIssued', { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.xia = res.data[0].value
          this.sheng = res.data[1].value
          this.wei = res.data[2].value
          myChart.setOption({
            series: [{
              type: 'pie',
              data: res.data,
              label: { normal: { show: true, position: 'inner' } }
            }],
            grid: {
              left: '2%'
            }
          });
        } else {
          this.$message.error(res.message);
        }
      }).catch(e => {
        this.$message.error(res.message);
      });

      const myChart1 = echarts.init(document.getElementById("mychart1"));
      this.axios.get('pass/baseManagement/v1/businessKanbans/getInspection', { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.chengpin = res.data[0].value
          this.yuanliao = res.data[1].value
          myChart1.setOption({
            series: [{
              type: 'pie',
              data: res.data,
              label: { normal: { show: true, position: 'inner' } }
            }],
            grid: {
              left: '2%'
            }
          });
        } else {
          this.$message.error(res.message);
        }
      }).catch(e => {
        this.$message.error(res.message);
      });

      const mychart2 = echarts.init(document.getElementById("mychart2"));
      this.axios.get('pass/baseManagement/v1/businessKanbans/getClassification', { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          mychart2.setOption({
            xAxis: [
              {
                data: res.data.listMatName,
                axisLabel: { interval: 0, rotate: -40 },
                // axisLabel: {  //书写格式 x轴长度大于3时 变成 物料的...
                //     formatter: val =>{
                //         let txt = val
                //         if(val.length > 3){
                //             txt = val.substr(0.3) + '...'
                //         }
                //         return txt;
                //     }
                // }
              }
            ],
            yAxis: {
              name: '个数',
            },
            series: {
              type: "bar",
              data: res.data.listValue,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    formatter: '{c}',
                    position: 'top' // 数值在柱体上方
                  }
                }
              }
            },
            grid: {
              left: '5%'
            }
          });
        } else {
          this.$message.error(res.message);
        }
      }).catch(e => {
        this.$message.error(res.message);
      });

      //检验任务完成情况
      const mychart3 = echarts.init(document.getElementById("mychart3"));
      this.axios.get('pass/baseManagement/v1/businessKanbans/getTask', { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          mychart3.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['完成', '未完成']
            },
            xAxis: [
              {
                data: res.data.listTaskName,
                axisLabel: {
                  interval: 0,
                  formatter: function (value) {
                    return value.split("").join("\n");
                  }
                }
              }
            ],
            yAxis: {
              name: '个数',
            },
            series: [
              {
                name: '完成',
                type: "bar",
                data: res.data.listTaskComplete,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      formatter: '{c}',
                      position: 'top' // 数值在柱体上方
                    }
                  }
                },
                stack: 'x'
              },
              {
                name: '未完成',
                type: "bar",
                data: res.data.listTaskNot,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      formatter: '{c}',
                      position: 'top' // 数值在柱体上方
                    }
                  }
                },
                stack: 'x'
              },
            ],
            grid: {
              left: '5%'
            }
          })
        } else {
          this.$message.error(res.message);
        }
      }).catch(e => {
        this.$message.error(res.message);
      });



      const lineChart = echarts.init(document.getElementById("lineChart"));
      this.axios.get('pass/baseManagement/v1/businessKanbans/getSampleTrend', { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          lineChart.setOption({
            xAxis: {
              data: res.data.listName,
              axisLabel: {
                // interval:0,rotate:-40 ,
                textStyle: {
                  fontSize: 10,
                }
              }
            },
            yAxis: {
              axisLine: false,
            },
            series: [
              {
                data: res.data.listCount,
                type: 'line',
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontSize: 12
                  }
                },
                chartExtend: {
                  dataZoom: [
                    {
                      type: 'slider', //表示以滚动条的形式出现
                      show: true, //显示滚动条
                      start: 0,
                      end: 50 //表示x轴的数据最多显示50%
                    }
                  ]
                }
              },
            ],
            grid: {
              left: '1%'
            }
          }
          )
        } else {
          this.$message.error(res.message);
        }
      }).catch(e => {
        this.$message.error(res.message);
      });
      // //随着屏幕大小调节图表 res.data.listMatName
      // window.addEventListener("resize", () => {
      //     myChart.resize();
      // });
      // // 基本柱状图
      // const option = {
      //     xAxis: {
      //         data: this.xData
      //     },
      //     yAxis: {
      //         data: ['10','20']
      //     },
      //     series: [
      //     {
      //         type: "bar", //形状为柱状图
      //         data: this.yData,
      //         barWidth: '10%'
      //     }
      //     ]
      // };
    },
    chaoshi() {
      const lineChart1 = echarts.init(document.getElementById("lineChart1"));
      this.axios.get('pass/baseManagement/v1/businessKanbans/getMissionTimeouts?value=' + this.codeV, { individualType: 'json' }).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.listName = res.data.listName
          this.listCount = res.data.listCount
          this.listMap = res.data.listMap
          lineChart1.setOption({

            xAxis: {
              data: res.data.listData,
              axisLabel: {
                interval: 0,
                textStyle: {
                  fontSize: 10,
                },
                // formatter: function(value){
                //     return value.split("").join("\n");
                // }
              }
            },
            yAxis: {
              axisLine: false,
            },
            series: [
              {
                data: res.data.listCount,
                type: 'line',
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontSize: 12
                  }
                },
                chartExtend: {
                  dataZoom: [
                    {
                      type: 'slider', //表示以滚动条的形式出现
                      show: true, //显示滚动条
                      start: 0,
                      end: 50 //表示x轴的数据最多显示50%
                    }
                  ]
                }
              },
            ],
            grid: {
              left: '1%'
            }
          }
          )
        } else {
          this.$message.error(res.message);
        }
      }).catch(e => {
        this.$message.error(res.message);
      });
    }
  }
}
</script>
