zhoushihao
2025-04-17 81c432dc393520e3ed2e408035455837c56840af
UI-Project/src/views/largescreendisplay/screendisplay.vue
@@ -54,17 +54,25 @@
  let twoFinish = ref();
  let oneunFinish = ref();
  let twounFinish = ref();
  if (load.value) {
    oneFinish = pieChartVOS.value[0].oneCompletedQuantity;
    twoFinish = pieChartVOS.value[0].twoCompletedQuantity;
    oneunFinish = pieChartVOS.value[0].oneUncompletedQuantity;
    twounFinish = pieChartVOS.value[0].twoUncompletedQuantity;
  if (pieChartVOS.length > 0) {
    if (load.value) {
      oneFinish = pieChartVOS.value[0].oneCompletedQuantity;
      twoFinish = pieChartVOS.value[0].twoCompletedQuantity;
      oneunFinish = pieChartVOS.value[0].oneUncompletedQuantity;
      twounFinish = pieChartVOS.value[0].twoUncompletedQuantity;
    } else {
      oneFinish = pieChartVOS.value[0].oneCompletedArea;
      twoFinish = pieChartVOS.value[0].twoCompletedArea;
      oneunFinish = pieChartVOS.value[0].oneUncompletedArea;
      twounFinish = pieChartVOS.value[0].twoUncompletedArea;
    }
  } else {
    oneFinish = pieChartVOS.value[0].oneCompletedArea;
    twoFinish = pieChartVOS.value[0].twoCompletedArea;
    oneunFinish = pieChartVOS.value[0].oneUncompletedArea;
    twounFinish = pieChartVOS.value[0].twoUncompletedArea;
    oneFinish = 0;
    twoFinish = 0;
    oneunFinish = 0;
    twounFinish = 0;
  }
  const chartDomOne = chartOne.value;
  if (!chartDomOne) {
@@ -152,15 +160,22 @@
  let oneFinish = ref();
  let ondDamage = ref();
  let oneunFinish = ref();
  if (temp.value) {
    oneFinish = pieChartVOS.value[0].oneCompletedQuantity;
    ondDamage = pieChartVOS.value[0].oneDamageQuantity;
    oneunFinish = pieChartVOS.value[0].oneUncompletedQuantity;
  if (pieChartVOS.length > 0) {
    if (temp.value) {
      oneFinish = pieChartVOS.value[0].oneCompletedQuantity;
      ondDamage = pieChartVOS.value[0].oneDamageQuantity;
      oneunFinish = pieChartVOS.value[0].oneUncompletedQuantity;
    } else {
      oneFinish = pieChartVOS.value[0].oneCompletedArea;
      ondDamage = pieChartVOS.value[0].oneDamageArea;
      oneunFinish = pieChartVOS.value[0].oneUncompletedArea;
    }
  } else {
    oneFinish = pieChartVOS.value[0].oneCompletedArea;
    ondDamage = pieChartVOS.value[0].oneDamageArea;
    oneunFinish = pieChartVOS.value[0].oneUncompletedArea;
    oneFinish = 0;
    ondDamage = 0;
    oneunFinish = 0;
  }
  const chartDomOne = chartThree.value;
  if (!chartDomOne) {
@@ -235,17 +250,25 @@
  let twoFinish = ref();
  let oneunFinish = ref();
  let twounFinish = ref();
  if (edg.value) {
    oneFinish = pieChartVOS.value[0].oneCompletedQuantity;
    twoFinish = pieChartVOS.value[0].twoCompletedQuantity;
    oneunFinish = pieChartVOS.value[0].oneUncompletedQuantity;
    twounFinish = pieChartVOS.value[0].twoUncompletedQuantity;
  if (pieChartVOS.length > 0) {
    if (edg.value) {
      oneFinish = pieChartVOS.value[0].oneCompletedQuantity;
      twoFinish = pieChartVOS.value[0].twoCompletedQuantity;
      oneunFinish = pieChartVOS.value[0].oneUncompletedQuantity;
      twounFinish = pieChartVOS.value[0].twoUncompletedQuantity;
    } else {
      oneFinish = pieChartVOS.value[0].oneCompletedArea;
      twoFinish = pieChartVOS.value[0].twoCompletedArea;
      oneunFinish = pieChartVOS.value[0].oneUncompletedArea;
      twounFinish = pieChartVOS.value[0].twoUncompletedArea;
    }
  } else {
    oneFinish = pieChartVOS.value[0].oneCompletedArea;
    twoFinish = pieChartVOS.value[0].twoCompletedArea;
    oneunFinish = pieChartVOS.value[0].oneUncompletedArea;
    twounFinish = pieChartVOS.value[0].twoUncompletedArea;
    oneFinish = 0;
    twoFinish = 0;
    oneunFinish = 0;
    twounFinish = 0;
  }
  const chartDomOne = chartTwo.value;
  if (!chartDomOne) {
@@ -321,17 +344,25 @@
  let twoFinish = ref();
  let oneunFinish = ref();
  let twounFinish = ref();
  if (hollow.value) {
    oneFinish = pieChartVOS.value[0].oneCompletedQuantity;
    twoFinish = pieChartVOS.value[0].twoCompletedQuantity;
    oneunFinish = pieChartVOS.value[0].oneUncompletedQuantity;
    twounFinish = pieChartVOS.value[0].twoUncompletedQuantity;
  if (pieChartVOS.length > 0) {
    if (hollow.value) {
      oneFinish = pieChartVOS.value[0].oneCompletedQuantity;
      twoFinish = pieChartVOS.value[0].twoCompletedQuantity;
      oneunFinish = pieChartVOS.value[0].oneUncompletedQuantity;
      twounFinish = pieChartVOS.value[0].twoUncompletedQuantity;
    } else {
      oneFinish = pieChartVOS.value[0].oneCompletedArea;
      twoFinish = pieChartVOS.value[0].twoCompletedArea;
      oneunFinish = pieChartVOS.value[0].oneUncompletedArea;
      twounFinish = pieChartVOS.value[0].twoUncompletedArea;
    }
  } else {
    oneFinish = pieChartVOS.value[0].oneCompletedArea;
    twoFinish = pieChartVOS.value[0].twoCompletedArea;
    oneunFinish = pieChartVOS.value[0].oneUncompletedArea;
    twounFinish = pieChartVOS.value[0].twoUncompletedArea;
    oneFinish = 0;
    twoFinish = 0;
    oneunFinish = 0;
    twounFinish = 0;
  }
  const chartDomOne = chartFour.value;
  if (!chartDomOne) {
@@ -943,7 +974,7 @@
      <!-- 生产统计 -->
      <div style="height: 100px;width: 25%;float: right;">
        <div id="ss" style="width: 100%; display: flex; justify-content: center;">
          <div ref="chartRef" style="width: 600px; height: 400px;"></div>
          <div ref="chartRef" style="width: 600px; height: 400px;" @dblclick="handlehistorical10()"></div>
        </div>
        <div style="width: 100%;height: 245px;display: flex;">
          <div ref="chartOne" style="width: 100%;"></div>
@@ -955,46 +986,54 @@
      <div style="width: 50%;">
        <div class="img-screen" alt="Screen">
          <!-- 钢化半透明色块 -->
          <div style="width: 80px;height: 40px;top: 130px;left: 130px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
          <div
            style="width: 80px;height: 40px;top: 130px;left: 130px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
            <div>{{ $t('large.quantity') }}:{{ productionVO.length > 0 ? productionVO[6].countOut : 0 }}片</div>
            <div>{{ $t('large.are') }}:{{ productionVO.length > 0 ? productionVO[6].totalAreaOut : 0 }}m²</div>
          </div>
          <!-- 中空一线半透明色块 -->
          <div style="width: 80px;height: 40px;top: 315px;left: 450px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
          <div
            style="width: 80px;height: 40px;top: 315px;left: 450px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
            <div>{{ $t('large.quantity') }}:{{ productionVO.length > 0 ? productionVO[6].hollowCountOutOne : 0 }}片</div>
            <div>{{ $t('large.are') }}:{{ productionVO.length > 0 ? productionVO[6].hollowTotalAreaOutOne : 0 }}m²</div>
          </div>
          <!-- 中空二线半透明色块 -->
          <div style="width: 80px;height: 40px;top: 230px;left: 450px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
          <div
            style="width: 80px;height: 40px;top: 230px;left: 450px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
            <div>{{ $t('large.quantity') }}:{{ productionVO.length > 0 ? productionVO[6].hollowCountOutTwo : 0 }}片</div>
            <div>{{ $t('large.are') }}:{{ productionVO.length > 0 ? productionVO[6].hollowTotalAreaOutTwo : 0 }}m²</div>
          </div>
          <!-- 切割二线半透明色块 -->
          <div style="width: 80px;height: 40px;top: 542px;left: 410px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
          <div
            style="width: 80px;height: 40px;top: 542px;left: 410px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
            <div>{{ $t('large.quantity') }}:{{ productionVO.length > 0 ? productionVO[6].countOutOne : 0 }}片</div>
            <div>{{ $t('large.are') }}:{{ productionVO.length > 0 ? productionVO[6].totalAreaOutOne : 0 }}m²</div>
          </div>
          <!-- 切割一线半透明色块 -->
          <div style="width: 80px;height: 40px;top: 490px;left: 410px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
          <div
            style="width: 80px;height: 40px;top: 490px;left: 410px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
            <div>{{ $t('large.quantity') }}:{{ productionVO.length > 0 ? productionVO[6].countOutTwo : 0 }}片</div>
            <div>{{ $t('large.are') }}:{{ productionVO.length > 0 ? productionVO[6].totalAreaOutTwo : 0 }}m²</div>
          </div>
          <!-- 磨边一线半透明色块 -->
          <div style="width: 80px;height: 40px;top: 410px;left: 450px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
          <div
            style="width: 80px;height: 40px;top: 369px;left: 450px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
            <div>{{ $t('large.quantity') }}:{{ productionVO.length > 0 ? productionVO[6].countOutOne : 0 }}片</div>
            <div>{{ $t('large.are') }}:{{ productionVO.length > 0 ? productionVO[6].totalAreaOutOne : 0 }}m²</div>
          </div>
          <!-- 磨边二线半透明色块 -->
          <div style="width: 80px;height: 40px;top: 369px;left: 450px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
          <div
            style="width: 80px;height: 40px;top: 410px;left: 450px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
            <div>{{ $t('large.quantity') }}:{{ productionVO.length > 0 ? productionVO[6].countOutTwo : 0 }}片</div>
            <div>{{ $t('large.are') }}:{{ productionVO.length > 0 ? productionVO[6].totalAreaOutTwo : 0 }}m²</div>
          </div>
          <!-- 钢化前大理片半透明色块 -->
          <div style="width: 80px;height: 40px;top: 380px;left: 290px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
          <div
            style="width: 80px;height: 40px;top: 380px;left: 290px;position: absolute;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;z-index: 999;">
            <div>{{ $t('large.quantity') }}:{{ productionVO.length > 0 ? productionVO[6].countIn : 0 }}片</div>
            <div>{{ $t('large.are') }}:{{ productionVO.length > 0 ? productionVO[6].totalAreaIn : 0 }}m²</div>
          </div>
          <!-- 钢化色块 -->
          <div v-if="temperingGlassInfoInList > 0" class="tempering"
            style="width: 44px;height: 19px;top: 284px;left: 178px;position: absolute;background-color: #911005;"></div>
@@ -1004,9 +1043,9 @@
            style="width: 53px;height: 22px;top: 282px;left: 282px;position: absolute;background-color: #911005;"></div>
          <!-- 切割台色块 -->
          <div v-if="engineeringOne.length > 1" class="slicing"
            style="width: 45px;height: 20px;top: 500px;left: 496px;position: absolute;background-color: #911005;"></div>
          <div v-if="engineeringTwo.length > 1" class="slicing"
            style="width: 45px;height: 20px;top: 550px;left: 496px;position: absolute;background-color: #911005;"></div>
          <div v-if="engineeringTwo.length > 1" class="slicing"
            style="width: 45px;height: 20px;top: 500px;left: 496px;position: absolute;background-color: #911005;"></div>
          <!-- 原片仓储色块 -->
          <div class="raw" style="width: 27px;height: 30px;top: 497px;left: 296px;position: absolute;">
            <div v-for="(item, index) in rawGlassStorageDetailList.slice(0, 7)" :key="index"
@@ -1035,11 +1074,11 @@
          <!-- 磨边色块 -->
          <div class="container"
            style="position: relative;width: 15px;height: 15px;top: 500px;left: 638px;position: absolute;">
            <div v-for="(box, index) in boxes" :key="index" class="box" :style="box.style"></div>
            <div v-for="(box, index) in boxes2" :key="index" class="box" :style="box.style"></div>
          </div>
          <div class="container"
            style="position: relative;width: 15px;height: 15px;top: 548px;left: 690px;position: absolute;">
            <div v-for="(box, index) in boxes2" :key="index" class="box" :style="box.style"></div>
            <div v-for="(box, index) in boxes" :key="index" class="box" :style="box.style"></div>
          </div>
          <!-- 钢化运动色块 -->
          <div class="container"
@@ -1104,7 +1143,7 @@
      <div style="height: 100px;width: 25%;float: right;">
        <div id="ss" style="width: 100%; display: flex; justify-content: center;">
          <div ref="chartRef2" style="width: 600px; height: 400px;"></div>
          <div ref="chartRef2" style="width: 600px; height: 400px;" @dblclick="handlehistorical10()"></div>
        </div>
        <div style="width: 100%;height: 245px;display: flex;">
          <div ref="chartThree" style="width: 100%;"></div>