11-mes-new/src/views/QualityManager/HomePage.vue

<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="质量1">
            <div class="table-wrapper fix-table-exception-report">
              <techy-table
                :page="1"
                :limit="8"
                :show-index="false"
                :table-config="qualityTableProps"
                :table-data="qualityDatalist"
              />
            </div>
          </techy-container>
        </div>

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

      <div class="part-2">
        <techy-container :title="'质量缺陷分析'" icon="质量3">
          <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'

export default {
  name: 'QualityManagerHome',
  components: {
    TechyHeader,
    TechyContainer,
    TechyBox,
    TechyAnalysisBar,
    TechyAnalysisHeader,
    TechyTable,
    // FaultCategoryChart,
    PlFaultAnalysisPieChart,
    NewBar,
    NewLineStack
  },
  data() {
    return {
      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>
::-webkit-scrollbar {
  width: calc(8px * var(--beilv));
}

::-webkit-scrollbar-track {
  background-color: #14243f;
  border-radius: 0;
}

::-webkit-scrollbar-button {
  width: calc(8px * var(--beilv));
  height: calc(8px * var(--beilv));
  background: #5bc4bf9f;
  position: relative;
}

::-webkit-scrollbar-thumb {
  border-radius: calc(8px * var(--beilv));
  background: #5bc4bf9f;
}

.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%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: url('./assets/bg.png') no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.techy-body {
  flex: 1 0;
  height: 65vh;
  width: 100%;
  padding: calc(24px * var(--beilv));
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--beilv));
}

.table-wrapper {
  height: calc(100% - 3vh);
  overflow: auto;
}

.grid {
  display: grid;
}

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

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

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

.part-1 {
  display: flex;
  gap: calc(16px * var(--beilv));
  flex: 1;
  height: calc(263px * var(--beilv));
}

.part-1 > div {
  width: 30px;
  flex: 1 1;
}

.part-2 {
  flex: 0;
  height: calc(542px * var(--beilv));
}

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

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

.quality-analysis__body__row-2 {
  /* height: calc(100%); */
  /* height: 200px;  */
  /* flex: 1.5 1.5; */
  overflow: hidden;
  display: flex;
  gap: calc(16px * var(--beilv));
  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>