<template>
  <div ref="cockpit-container-quality" class="visual-container">
    <techy-header :head-title="'合肥新能源数字工厂质量管理驾驶舱'" @toggle-full-screen="changeFullScreen" />
    <section class="techy-body">
      <div class="part-1">
        <div>
          <techy-container :title="'质量异常上报'" :icon="qualitySVG">
            <div class="fix-table-exception-report">
              <techy-table
                :page="1"
                :limit="10"
                :show-index="false"
                :table-config="qualityTableProps"
                :table-data="qualityDatalist"
              />
            </div>
          </techy-container>
        </div>

        <div class="fix-table-exception-alert">
          <techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG">
            <techy-table
              :page="1"
              :limit="8"
              :show-index="false"
              :table-config="qualityExceptionTableProps"
              :table-data="qualityExceptionDatalist"
            />
          </techy-container>
        </div>
      </div>

      <div class="part-2">
        <techy-container :title="'质量缺陷分析'" :icon="qualityFaultSVG">
          <div v-if="1" class="quality-analysis__body">
            <!-- 第一行 -->
            <div class="quality-analysis__body__row-1">
              <!-- 第一列 -->
              <div class="grow-8 flex gap-16">
                <div class="grow">
                  <techy-box class="" style="padding: 16px;">
                    <techy-analysis-header>缺陷分类分析</techy-analysis-header>
                    <new-bar
                      :xlabel-font-size="8"
                      :xlabel-rotate="20"
                      :name-list="[
                        '擦划伤1',
                        '擦划伤2',
                        '擦划伤3',
                        '擦划伤4',
                        '擦划伤5',
                        '擦划伤6',
                        '擦划伤7',
                        '擦划伤8',
                        '擦划伤9',
                        '擦划伤0',
                        '擦划伤11',
                        '擦划伤12'
                      ]"
                      chart-name="fault-category"
                      :data-list="[
                        {
                          topColor: 'rgba(59, 76, 118, 0.2)',
                          bottomColor: '#31A2FF',
                          name: '库存',
                          data: [32, 65, 65, 54, 40, 60, 64, 91, 55, 65, 37, 77]
                        }
                      ]"
                    />
                  </techy-box>
                </div>
                <div class="grow">
                  <techy-box class="" style="padding: 16px;">
                    <techy-analysis-header>工序缺陷分析</techy-analysis-header>
                    <new-bar
                      chart-name="process-fault"
                      :name-list="['A', 'B', 'C', 'D', 'E', 'F']"
                      :data-list="[
                        {
                          topColor: 'rgba(59, 76, 118, 0.2)',
                          bottomColor: '#49FBD6',
                          name: '库存',
                          data: [64, 91, 55, 65, 37, 77]
                        }
                      ]"
                    />
                  </techy-box>
                </div>
              </div>

              <!-- 第二列 -->
              <div class="grow-6 flex gap-16">
                <div class="grow">
                  <techy-box class="" style="padding: 16px;">
                    <techy-analysis-header>产线缺陷分析</techy-analysis-header>
                    <pl-fault-analysis-pie-chart />
                  </techy-box>
                </div>
                <div class="grow">
                  <techy-box class="" style="padding: 16px;">
                    <techy-analysis-header>产品成品率</techy-analysis-header>
                    <new-line-stack />
                    <div class="date-select">
                      <span>日</span>
                      <span class="date-select__active">月</span>
                    </div>
                  </techy-box>
                </div>
              </div>
            </div>
            <!-- end 第一行 -->

            <!-- 第二行 -->
            <div class="quality-analysis__body__row-2">
              <techy-box style="padding: 16px;" class="flex flex-col">
                <techy-analysis-header>产线A工序质量分析(数量)</techy-analysis-header>
                <div class="grow grid gap-16-8 column-2 row-5">
                  <techy-analysis-bar
                    v-for="(item, index) in qualityAnalysisDatalist"
                    :key="index"
                    :name="item.name"
                    :amount="item.amount"
                    color="green"
                  />
                </div>
              </techy-box>
              <techy-box style="padding: 16px;" class="flex flex-col">
                <techy-analysis-header>产线B工序质量分析(数量)</techy-analysis-header>
                <div class="grow grid gap-16-8 column-2 row-5">
                  <techy-analysis-bar
                    v-for="(item, index) in qualityAnalysisDatalist"
                    :key="index"
                    :name="item.name"
                    :amount="item.amount"
                    color="blue"
                  />
                </div>
              </techy-box>
              <techy-box style="padding: 16px;" class="flex flex-col">
                <techy-analysis-header>产线C工序质量分析(数量)</techy-analysis-header>
                <div class="grow grid gap-16-8 column-2 row-5">
                  <techy-analysis-bar
                    v-for="(item, index) in qualityAnalysisDatalist"
                    :key="index"
                    :name="item.name"
                    :amount="item.amount"
                    color="orange"
                  />
                </div>
              </techy-box>
              <techy-box style="padding: 16px;" class="flex flex-col">
                <techy-analysis-header>产线D工序质量分析(数量)</techy-analysis-header>
                <div class="grow grid gap-16-8 column-2 row-5">
                  <techy-analysis-bar
                    v-for="(item, index) in qualityAnalysisDatalist"
                    :key="index"
                    :name="item.name"
                    :amount="item.amount"
                    color="pink"
                  />
                </div>
              </techy-box>
            </div>
          </div>
        </techy-container>
      </div>
    </section>
  </div>
</template>

<script>
import TechyContainer from './components/TechyContainer.vue'
import TechyHeader from './components/TechyHeader.vue'
import TechyBox from './components/TechyBox.vue'
import TechyTable from './components/TechyTable.vue'
import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
// import FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
import NewBar from './components/charts/newBar.vue'
import NewLineStack from './components/charts/newLineStack.vue'

import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData'

const qualitySVG = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>质量上报</title>
    <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="2-5质量管理" transform="translate(-384.000000, -254.000000)">
            <g id="编组-16备份-6" transform="translate(360.000000, 230.000000)">
                <g id="编组" transform="translate(24.000000, 24.000000)">
                    <polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
                    <path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-3" fill="#6EF9E1"></path>
                    <path d="M15.8982,17.8 L15.8982,20.15 C15.8622,20.495 16.1052,20.809 16.4482,20.86 L22.2982,20.86 C22.6462,20.814 22.8942,20.499 22.8582,20.15 L22.8582,17.73 C22.8582,17.56 22.7482,17.42 22.6282,17.42 C22.4772,17.441 22.3702,17.578 22.3882,17.73 L22.3882,20.24 L16.3882,20.24 L16.3882,17.72 C16.3882,17.56 16.2782,17.43 16.1582,17.43 C16.0382,17.43 15.9382,17.56 15.9282,17.72 L15.8982,17.8 Z M22.2982,21.04 L16.4582,21.04 C16.0112,20.992 15.6832,20.598 15.7182,20.15 L15.7182,17.67 C15.7192,17.449 15.8992,17.271 16.1202,17.2729833 C16.3392,17.274 16.5172,17.45 16.5182,17.67 L16.5182,20.1 L22.1782,20.1 L22.1782,17.78 C22.1422,17.551 22.2992,17.336 22.5282,17.3 C22.7572,17.265 22.9722,17.421 23.0082,17.651 C23.0152,17.694 23.0152,17.738 23.0082,17.78 L23.0082,20.2 C23.0182,20.619 22.7132,20.98 22.2982,21.04 L22.2982,21.04 Z" id="Fill-5" fill="#6EF9E1"></path>
                    <path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-7" fill="#6FFADE"></path>
                    <path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-9" fill="#6FFADE"></path>
                    <path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-11" fill="#6FFADE"></path>
                    <path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-13" fill="#6EF9E1"></path>
                    <path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Stroke-15" stroke="#6EF9E1" stroke-width="0.2"></path>
                    <path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-17" fill="#6FFADE"></path>
                    <path d="M12.2967,6.8498 L11.9997,12.7348 C11.9267,13.1178 11.5587,13.3688 11.1757,13.2948 C10.8917,13.2418 10.6697,13.0188 10.6147,12.7348 L10.3057,6.8498 L10.3057,6.7878 C10.3937,6.2348 10.9127,5.8568 11.4647,5.9438 C11.8997,6.0118 12.2407,6.3528 12.3087,6.7878 C12.3137,6.8078 12.3137,6.8288 12.3087,6.8498 L12.2967,6.8498 Z M11.3077,15.4668 C10.9047,15.4878 10.5627,15.1778 10.5417,14.7758 C10.5217,14.3728 10.8317,14.0308 11.2337,14.0098 C11.6357,13.9898 11.9787,14.2988 11.9987,14.7018 C11.9997,14.7178 12.0007,14.7338 11.9997,14.7498 C12.0067,15.1388 11.6967,15.4598 11.3077,15.4668 Z" id="Fill-19" fill="#6EF9E1"></path>
                    <path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-21" fill="#6FFADE"></path>
                    <path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-23" fill="#6FFADE"></path>
                </g>
            </g>
        </g>
    </g>
</svg>`
const qualityExceptionSVG = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>质量异常报警</title>
    <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="2-5质量管理" transform="translate(-1104.000000, -254.000000)">
            <g id="编组-16备份-8" transform="translate(1080.000000, 230.000000)">
                <g id="编组" transform="translate(24.000000, 24.000000)">
                    <polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
                    <path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-3" fill="#6FFADE"></path>
                    <path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-5" fill="#6FFADE"></path>
                    <path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-7" fill="#6FFADE"></path>
                    <path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-9" fill="#6FFADE"></path>
                    <path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-11" fill="#6FFADE"></path>
                    <path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-13" fill="#6FFADE"></path>
                    <path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-15" fill="#6FFADE"></path>
                    <path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Stroke-17" stroke="#6EF9E1" stroke-width="0.5"></path>
                    <path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-19" fill="#6FFADE"></path>
                    <path d="M12.6142,6.6317 L12.3172,12.5177 C12.2452,12.9007 11.8762,13.1517 11.4942,13.0777 C11.2092,13.0247 10.9862,12.8017 10.9322,12.5177 L10.6242,6.6317 L10.6242,6.5697 C10.7112,6.0177 11.2292,5.6397 11.7832,5.7267 C12.2182,5.7947 12.5582,6.1357 12.6272,6.5697 C12.6322,6.5907 12.6322,6.6117 12.6272,6.6317 L12.6142,6.6317 Z M11.6252,15.2497 C11.2222,15.2707 10.8802,14.9607 10.8592,14.5587 C10.8392,14.1557 11.1482,13.8137 11.5512,13.7927 C11.9532,13.7727 12.2962,14.0817 12.3162,14.4847 C12.3172,14.5007 12.3172,14.5167 12.3172,14.5327 C12.3242,14.9217 12.0142,15.2427 11.6252,15.2497 L11.6252,15.2497 Z" id="Fill-21" fill="#6EF9E1"></path>
                    <path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-23" fill="#6FFADE"></path>
                    <path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-25" fill="#6FFADE"></path>
                </g>
            </g>
        </g>
    </g>
</svg>`
const qualityFaultSVG = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>质量缺陷分析</title>
    <defs>
        <polygon id="path-1" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
        <polygon id="path-3" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
    </defs>
    <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="2-5质量管理" transform="translate(-384.000000, -529.000000)">
            <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
                <g id="编组" transform="translate(24.000000, 16.000000)">
                    <g>
                        <polygon id="Fill-1" fill="#6CC1B0" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
                        <path d="M16.4896,19.530219 C15.2696,19.5352 14.2756,18.5512 14.2695728,17.3302 C14.2636,16.1092 15.2496,15.1152 16.4696,15.1101728 C17.6906,15.1042 18.6836,16.0902 18.6896,17.3092 L18.6896,17.3202 C18.6896,18.5372 17.7066,19.5242 16.4896,19.530219 M21.0696,20.9602 L19.5106,19.4002 C20.6666,17.7222 20.2446,15.4252 18.5666,14.2672 C16.8886,13.1102 14.5916,13.5332 13.4336,15.2112 C12.2776,16.8882 12.6996,19.1862 14.3776,20.3422 C15.6506,21.2202 17.3366,21.2122 18.5996,20.3202 L20.1496,21.8802 C20.2386,21.9672 20.3816,21.9672 20.4696,21.8802 L21.0696,21.2802 C21.1566,21.1902 21.1566,21.0492 21.0696,20.9602" id="Fill-3" fill="#6EF9E1"></path>
                    </g>
                    <path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-5" fill="#6EF9E1"></path>
                    <path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-7" fill="#6EF9E1"></path>
                    <g transform="translate(3.130000, 2.179202)">
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"></use>
                        </mask>
                        <g id="Clip-10"></g>
                        <path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-9" fill="#6EF9E1" mask="url(#mask-2)"></path>
                    </g>
                    <g transform="translate(8.839800, 6.600000)" fill="#6EF9E1">
                        <path d="M7.1,0.73 C7.1,1.22 6.9,1.47 6.491,1.47 L0.61,1.47 C0.201,1.47 0,1.22 0,0.73 C0,0.24 0.201,0 0.61,0 L6.491,0 C6.9,0 7.1,0.24 7.1,0.73" id="Fill-11"></path>
                        <path d="M5.1703,4.6597 C5.1703,5.1497 4.9603,5.3997 4.5503,5.3997 L0.6203,5.3997 C0.2103,5.3997 0.0003,5.1497 0.0003,4.6597 C0.0003,4.1707 0.2103,3.9207 0.6203,3.9207 L4.5503,3.9207 C4.9603,3.9207 5.1703,4.1707 5.1703,4.6597" id="Fill-13"></path>
                        <path d="M3.1606,8.5904 C3.1606,9.0794 2.9506,9.3294 2.5296,9.3294 L0.6306,9.3294 C0.2106,9.3294 0.0006,9.0794 0.0006,8.5904 C0.0006,8.1004 0.2106,7.8504 0.6306,7.8504 L2.5296,7.8504 C2.9506,7.8504 3.1606,8.1004 3.1606,8.5904" id="Fill-15"></path>
                    </g>
                    <path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-17" fill="#6EF9E1"></path>
                    <path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-19" fill="#6EF9E1"></path>
                    <g transform="translate(3.130000, 2.179202)">
                        <mask id="mask-4" fill="white">
                            <use xlink:href="#path-3"></use>
                        </mask>
                        <g id="Clip-22"></g>
                        <path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-21" fill="#6EF9E1" mask="url(#mask-4)"></path>
                    </g>
                    <g transform="translate(6.609800, 6.600000)" fill="#6EF9E1">
                        <path d="M9.33,0.73 C9.33,1.22 9.07,1.47 8.53,1.47 L0.801,1.47 C0.27,1.47 0,1.22 0,0.73 C0,0.24 0.27,0 0.801,0 L8.53,0 C9.07,0 9.33,0.24 9.33,0.73" id="Fill-23"></path>
                        <path d="M6.79,4.6597 C6.79,5.1497 6.52,5.3997 5.971,5.3997 L0.811,5.3997 C0.27,5.3997 8.8817842e-16,5.1497 8.8817842e-16,4.6597 C8.8817842e-16,4.1707 0.27,3.9207 0.811,3.9207 L5.971,3.9207 C6.52,3.9207 6.79,4.1707 6.79,4.6597" id="Fill-25"></path>
                        <path d="M4.1601,8.5904 C4.1601,9.0794 3.8801,9.3294 3.3301,9.3294 L0.8301,9.3294 C0.2801,9.3294 0.0001,9.0794 0.0001,8.5904 C0.0001,8.1004 0.2801,7.8504 0.8301,7.8504 L3.3301,7.8504 C3.8801,7.8504 4.1601,8.1004 4.1601,8.5904" id="Fill-27"></path>
                        <path d="M13.9501,14.1197 C14.3091,14.1197 14.6001,14.4107 14.6001,14.7697 C14.6001,15.1297 14.3091,15.4207 13.9501,15.4207 C13.5911,15.4207 13.3001,15.1297 13.3001,14.7697 C13.3001,14.4107 13.5911,14.1197 13.9501,14.1197" id="Fill-29"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>`

export default {
  name: 'QualityManagerHome',
  components: {
    TechyHeader,
    TechyContainer,
    TechyBox,
    TechyAnalysisBar,
    TechyAnalysisHeader,
    TechyTable,
    // FaultCategoryChart,
    PlFaultAnalysisPieChart,
    NewBar,
    NewLineStack
  },
  data() {
    return {
      qualitySVG,
      qualityExceptionSVG,
      qualityFaultSVG,

      qualityTableProps,
      qualityDatalist,
      qualityExceptionDatalist,
      qualityExceptionTableProps,
      qualityAnalysisDatalist: [
        { name: '热端', amount: 20233 },
        { name: '丝印', amount: 20233328 },
        { name: '原片', amount: 20 },
        { name: '钢化', amount: 2000 },
        { name: '上片磨边', amount: 20 },
        { name: '下片铺纸', amount: 202423 },
        { name: '镀膜', amount: 20 },
        { name: '包装', amount: 20 },
        { name: '清晰', amount: 20 },
        { name: '物流仓储', amount: 233920 }
      ]
    }
  },
  computed: {
    ...mapGetters(['sidebar'])
  },
  methods: {
    changeFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs['cockpit-container-quality'])
    }
  }
}
</script>

<style scoped>
.fix-table-exception-alert >>> .el-table td .cell {
  width: 75% !important;
  margin: auto;
  text-align: left;
}
.fix-table-exception-report >>> .el-table td .cell {
  width: 70% !important;
  margin: auto;
  text-align: left;
}



.visual-container {
  width: 100%;
  min-width: 1280px;
  /* height: calc(100vh - 96px); */
  background: url('./assets/bg.png') no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.techy-body {
  height: calc(100vh - 96px);
  width: 100%;
  padding: calc(100vw / 1920 * 24);
  /* display: grid;
  grid-template-rows: minmax(280px, 25vh) 1fr; */
  display: flex;
  flex-direction: column;
  gap: calc(100vw / 1920 * 16);
}

.grid {
  display: grid;
}

.gap-16-8 {
  /* gap: calc(100vw / 1920 * 16) calc(100vw / 1920 * 8); */
  gap: calc(100vw / 1920 * 8);
}

.column-2 {
  grid-template-columns: 1fr 1fr;
}

.row-5 {
  grid-template-rows: repeat(5, 25px);
}

.part-1 {
  /* flex: 1 1; */
  display: flex;
  gap: calc(100vw / 1920 * 16);
  flex: 1;
}

.part-1 > div {
  flex: 1 1;
}

.part-2 {
  flex: 1 1;
}

.quality-analysis__body {
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  gap: calc(100vw / 1920 * 16);
}

.quality-analysis__body__row-1 {
  /* flex: 1 1;
  max-height: 25vh; */
  height: 25vh;
  overflow: hidden;
  display: flex;
  gap: calc(100vw / 1920 * 16);
}

.quality-analysis__body__row-2 {
  /* height: calc(100%); */
  /* height: 200px;  */
  /* flex: 1.5 1.5; */
  overflow: hidden;
  display: flex;
  gap: calc(100vw / 1920 * 16);
  font-size: 0.65vw;
}

.quality-analysis__body__row-2 > .techy-box {
  flex: 1 1;
}

.quality-analysis__body__row-2__body {
  /* height: calc(100% - 128px); */
  overflow: hidden;
  background-color: #99302a;
}
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.grow {
  flex-grow: 1;
}

.grow-6 {
  flex-grow: 6;
}

.grow-8 {
  flex-grow: 8;
}

.grow-10 {
  flex-grow: 10;
}

.mb-20 {
  margin-bottom: 20px;
}

.mr-16 {
  margin-right: 16px;
}

.gap-16 {
  gap: calc(100vw / 1920 * 16);
}

.date-select {
  position: absolute;
  top: calc(100vh / 1920 * 22);
  right: calc(100vw / 1440 * 12);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  cursor: pointer;
}

.date-select span {
  display: inline-block;
  width: 40px;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  color: white;
  background-color: #31878c94;
}

.date-select span.date-select__active {
  background-color: #42BBB7;
}
</style>
