Merge remote-tracking branch 'origin/dev_New' into dev_New

gaoluyang

15 小时以前 728d7cddc4326ffd615dd6a0c6df75c54ed013c4

Merge remote-tracking branch 'origin/dev_New' into dev_New

 src/views/reportAnalysis/productionAnalysis/components/CarouselCards.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,306 @@
<template>
  <div class="carousel-cards">
    <button 
      v-if="canScrollLeft"
      class="nav-button nav-button-left"
      @click="scrollLeftFn"
    >
      <img src="@/assets/BI/jiantou.png" alt="左箭头" />
    </button>
    <div 
      class="cards-container" 
      :style="{ '--visible-count': visibleCount }"
      ref="cardsContainerRef"
    >
      <div
        v-for="(item, index) in items"
        :key="index"
        class="card-item"
      >
        <div v-if="item.icon" class="card-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
        <div class="card-title">
          <div class="card-label">{{ item.label }}</div>
          <div class="card-value">
            <span class="value-number">{{ item.value }}</span>
            <span class="value-unit">{{ item.unit }}</span>
          </div>
          <div v-if="item.rate ?? item.ratio ?? item.percent" class="card-rate">
            <span class="rate-value">{{ item.rate ?? item.ratio ?? item.percent }}%</span>
          </div>
        </div>
      </div>
    </div>
    <button 
      v-if="canScrollRight"
      class="nav-button nav-button-right"
      @click="scrollRightFn"
    >
      <img src="@/assets/BI/jiantou.png" alt="右箭头" />
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch, computed } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => [],
    validator: (value) => {
      return value.every(item => 
        item && typeof item.label !== 'undefined' && 
        typeof item.value !== 'undefined' && 
        typeof item.unit !== 'undefined'
      )
    }
  },
  visibleCount: {
    type: Number,
    default: 3
  }
})

const cardsContainerRef = ref(null)
const currentScrollLeft = ref(0)
const maxScrollLeft = ref(0)

// æ£€æŸ¥æ˜¯å¦å¯ä»¥å‘左滚动
const canScrollLeft = computed(() => {
  return currentScrollLeft.value > 0
})

// æ£€æŸ¥æ˜¯å¦å¯ä»¥å‘右滚动
const canScrollRight = computed(() => {
  return currentScrollLeft.value < maxScrollLeft.value
})

// æ›´æ–°æ»šåŠ¨çŠ¶æ€
const updateScrollState = () => {
  const container = cardsContainerRef.value
  if (!container) return
  
  currentScrollLeft.value = container.scrollLeft
  maxScrollLeft.value = container.scrollWidth - container.clientWidth
}

// å‘左滚动
const scrollLeftFn = () => {
  const container = cardsContainerRef.value
  if (!container) return
  
  const scrollItems = Array.from(container.querySelectorAll('.card-item'))
  if (scrollItems.length === 0) return
  
  const itemWidth = scrollItems[0]?.offsetWidth || 0
  const gap = 12
  const scrollDistance = itemWidth + gap
  
  container.scrollBy({
    left: -scrollDistance,
    behavior: 'smooth'
  })
  
  // å»¶è¿Ÿæ›´æ–°çŠ¶æ€ï¼Œç­‰å¾…滚动动画完成
  setTimeout(() => {
    updateScrollState()
  }, 300)
}

// å‘右滚动
const scrollRightFn = () => {
  const container = cardsContainerRef.value
  if (!container) return
  
  const scrollItems = Array.from(container.querySelectorAll('.card-item'))
  if (scrollItems.length === 0) return
  
  const itemWidth = scrollItems[0]?.offsetWidth || 0
  const gap = 12
  const scrollDistance = itemWidth + gap
  
  container.scrollBy({
    left: scrollDistance,
    behavior: 'smooth'
  })
  
  // å»¶è¿Ÿæ›´æ–°çŠ¶æ€ï¼Œç­‰å¾…滚动动画完成
  setTimeout(() => {
    updateScrollState()
  }, 300)
}

// ç›‘听 items å˜åŒ–，更新滚动状态
watch(() => props.items, () => {
  nextTick(() => {
    updateScrollState()
  })
}, { deep: true })

onMounted(() => {
  nextTick(() => {
    updateScrollState()
    // ç›‘听滚动事件
    const container = cardsContainerRef.value
    if (container) {
      container.addEventListener('scroll', updateScrollState)
    }
  })
})

onBeforeUnmount(() => {
  // æ¸…理滚动事件监听器
  const container = cardsContainerRef.value
  if (container) {
    container.removeEventListener('scroll', updateScrollState)
  }
})
</script>

<style scoped>
.carousel-cards {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.cards-container {
  display: flex;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  padding-bottom: 4px;
  scroll-behavior: smooth;
}

.cards-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(26, 88, 176, 0.6);
  border: 1px solid rgba(26, 88, 176, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  padding: 0;
}

.nav-button:hover {
  background: rgba(26, 88, 176, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.nav-button-left {
  left: -16px;
}

.nav-button-left img {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.nav-button-right {
  right: -16px;
}

.nav-button-right img {
  width: 16px;
  height: 16px;
}

.card-item {
  flex: 0 0 calc((100% - (var(--visible-count) - 1) * 12px) / var(--visible-count));
  min-width: calc((100% - (var(--visible-count) - 1) * 12px) / var(--visible-count));
  display: flex;
  align-items: center;
  background: linear-gradient(269deg, rgba(27,57,126,0.13) 0%, rgba(33,137,206,0.33) 98.13%, #24AFF4 100%);
  border-radius: 8px 8px 8px 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.card-item:hover {
  transform: translateY(-2px);
}

.card-icon {
  width: 80px;
  height: 60px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-right: 12px;
}

.card-title {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
}

.card-label {
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.card-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.card-rate {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.rate-label {
  opacity: 0.85;
}

.rate-value {
  font-weight: 500;
}

.value-number {
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 1;
}

.value-unit {
  font-size: 14px;
  color: #FFFFFF;
  font-weight: 400;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/DateTypeSwitch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,94 @@
<template>
  <el-radio-group
    v-model="currentValue"
    class="date-type-switch"
    @change="handleChange"
  >
    <el-radio-button :label="1">周</el-radio-button>
    <el-radio-button :label="2">月</el-radio-button>
    <el-radio-button :label="3">季度</el-radio-button>
  </el-radio-group>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 1, // é»˜è®¤é€‰ä¸­"周"
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

const currentValue = ref(props.modelValue)

// ç›‘听外部值变化
watch(
  () => props.modelValue,
  (newVal) => {
    currentValue.value = newVal
  }
)

// å¤„理值变化
const handleChange = (value) => {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style scoped>
.date-type-switch {
  display: inline-flex;
}

/* æœªé€‰ä¸­çŠ¶æ€çš„样式 */
.date-type-switch :deep(.el-radio-button__inner) {
  background-color: rgba(26, 88, 176, 0.3);
  color: rgba(184, 200, 224, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 6px 20px;
  font-size: 14px;
  transition: all 0.3s;
}

/* ç¬¬ä¸€ä¸ªæŒ‰é’®å·¦ä¾§åœ†è§’ */
.date-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* æœ€åŽä¸€ä¸ªæŒ‰é’®å³ä¾§åœ†è§’ */
.date-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* æŒ‰é’®ä¹‹é—´çš„分隔线 */
.date-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* é€‰ä¸­çŠ¶æ€çš„样式 */
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
  color: #ffffff;
  border-color: rgba(51, 120, 255, 0.8);
  box-shadow: none;
}

/* æ‚¬åœæ•ˆæžœ */
.date-type-switch :deep(.el-radio-button__inner:hover) {
  color: rgba(184, 200, 224, 1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* é€‰ä¸­çŠ¶æ€æ‚¬åœ */
.date-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
  background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
  color: #ffffff;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/PanelHeader.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,33 @@
<template>
  <div class="panel-header">
    <span class="panel-title">{{ title }}</span>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true,
    default: ''
  }
})
</script>

<style scoped>
.panel-header {
  background-image: url("@/assets/BI/kehuhetongback@2x.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.panel-title {
  width: 100%;
  font-weight: 500;
  font-size: 16px;
  color: #D9ECFF;
  padding-left: 46px;
  line-height: 36px;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/ProductTypeSwitch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,85 @@
<template>
  <el-radio-group
    v-model="currentValue"
    class="product-type-switch"
    @change="handleChange"
  >
    <el-radio-button :label="1">原材料</el-radio-button>
    <el-radio-button :label="3">半成品</el-radio-button>
    <el-radio-button :label="2">成品</el-radio-button>
  </el-radio-group>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 1, // é»˜è®¤é€‰ä¸­"原材料"
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

const currentValue = ref(props.modelValue)

watch(
  () => props.modelValue,
  (newVal) => {
    currentValue.value = newVal
  }
)

const handleChange = (value) => {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style scoped>
.product-type-switch {
  display: inline-flex;
}

.product-type-switch :deep(.el-radio-button__inner) {
  background-color: rgba(26, 88, 176, 0.3);
  color: rgba(184, 200, 224, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 6px 20px;
  font-size: 14px;
  transition: all 0.3s;
}

.product-type-switch :deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.product-type-switch :deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.product-type-switch :deep(.el-radio-button:not(:last-child) .el-radio-button__inner) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.product-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: linear-gradient(180deg, #3378ff 0%, #00a4ed 100%);
  color: #ffffff;
  border-color: rgba(51, 120, 255, 0.8);
  box-shadow: none;
}

.product-type-switch :deep(.el-radio-button__inner:hover) {
  color: rgba(184, 200, 224, 1);
  border-color: rgba(255, 255, 255, 0.3);
}

.product-type-switch :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner:hover) {
  background: linear-gradient(180deg, #4e8aff 0%, #4ee4ff 100%);
  color: #ffffff;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,351 @@
<template>
  <div>
    <PanelHeader title="生产订单完成进度" />
    <div class="main-panel">
      <div class="panel-item-customers">
        <CarouselCards :items="cardItems" :visible-count="4" />
        <div
          class="progress-table-container"
          ref="progressTableRef"
          style="margin-top: 0px;"
          @scroll="handleTableScroll"
        >
          <table class="progress-table">
            <thead>
              <tr>
                <th>生产订单号</th>
                <th>产品名称</th>
                <th>规格</th>
                <th>需求数量</th>
                <th>完成数量</th>
                <th>完成进度</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item, index) in progressTableData"
                :key="index"
                :ref="(el) => setRowRef(el, index)"
                :class="{ 'row-under-header': isRowUnderHeader(index) }"
              >
                <td>{{ item.npsNo || '-' }}</td>
                <td>{{ item.productCategory || '-' }}</td>
                <td>{{ item.specificationModel || '-' }}</td>
                <td>{{ item.quantity || 0 }}</td>
                <td>{{ item.completeQuantity || 0 }}</td>
                <td>
                  <el-progress
                    :percentage="calculateProgress(item)"
                    :color="progressColor(calculateProgress(item))"
                    :status="calculateProgress(item) >= 100 ? 'success' : ''"
                    :stroke-width="8"
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { getProgressStatistics } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'

const progressTableRef = ref(null)
const progressTableScrollTimer = ref(null)
const tableScrollTimeout = ref(null)
const tableRowRefs = ref([])
const rowsUnderHeader = ref(new Set())

// è®¢å•ç»Ÿè®¡å¯¹è±¡
const orderStatisticsObject = ref({
  totalOrderCount: 0,
  uncompletedOrderCount: 0,
  partialCompletedOrderCount: 0,
  completedOrderCount: 0,
})

// è½®æ’­å¡ç‰‡æ•°æ®ï¼ˆç”± orderStatisticsObject åŒæ­¥ï¼‰
const cardItems = ref([])

// ç”Ÿäº§è®¢å•å®Œæˆè¿›åº¦è¡¨æ ¼æ•°æ®
const progressTableData = ref([])

// è®¡ç®—完成进度百分比
const calculateProgress = (item) => {
  if (!item) return 0
  if (item.completionStatus !== undefined && item.completionStatus !== null) {
    const percentage = Number(item.completionStatus)
    if (isNaN(percentage)) return 0
    return Math.min(Math.max(Math.round(percentage), 0), 100)
  }
  if (!item.quantity || item.quantity === 0) return 0
  const percentage = ((item.completeQuantity || 0) / item.quantity) * 100
  return Math.min(Math.max(Math.round(percentage), 0), 100)
}

// æ ¹æ®è¿›åº¦ç™¾åˆ†æ¯”返回颜色
const progressColor = (percentage) => {
  const p = percentage || 0
  if (p < 30) return '#f56c6c'
  if (p < 50) return '#e6a23c'
  if (p < 80) return '#409eff'
  return '#67c23a'
}

const setRowRef = (el, index) => {
  if (el) {
    tableRowRefs.value[index] = el
  }
}

const isRowUnderHeader = (index) => rowsUnderHeader.value.has(index)

const handleTableScroll = () => {
  const tableContainer = progressTableRef.value
  if (!tableContainer) return
  const thead = tableContainer.querySelector('thead')
  if (!thead) return
  const theadHeight = thead.offsetHeight
  const containerRect = tableContainer.getBoundingClientRect()
  const containerTop = containerRect.top
  const theadBottom = containerTop + theadHeight
  rowsUnderHeader.value.clear()
  tableRowRefs.value.forEach((row, index) => {
    if (row) {
      const rowRect = row.getBoundingClientRect()
      const rowTop = rowRect.top
      const rowBottom = rowRect.bottom
      if (rowTop < theadBottom && rowBottom > containerTop) {
        rowsUnderHeader.value.add(index)
      }
    }
  })
  if (tableScrollTimeout.value) clearTimeout(tableScrollTimeout.value)
  tableScrollTimeout.value = setTimeout(() => {
    rowsUnderHeader.value.clear()
  }, 150)
}

const initProgressTableScroll = () => {
  const tableContainer = progressTableRef.value
  if (!tableContainer) return
  if (progressTableScrollTimer.value) {
    cancelAnimationFrame(progressTableScrollTimer.value)
    progressTableScrollTimer.value = null
  }
  if (tableContainer._pauseTimer) {
    clearInterval(tableContainer._pauseTimer)
    tableContainer._pauseTimer = null
  }
  const tbody = tableContainer.querySelector('tbody')
  if (!tbody) return
  const originalCount = progressTableData.value.length
  const allRows = Array.from(tbody.querySelectorAll('tr'))
  if (allRows.length > originalCount) {
    for (let i = originalCount; i < allRows.length; i++) {
      allRows[i].remove()
    }
  }
  const scrollItems = Array.from(tbody.querySelectorAll('tr'))
  if (scrollItems.length === 0) return
  const originalItemCount = scrollItems.length
  const thead = tableContainer.querySelector('thead')
  const theadHeight = thead ? thead.offsetHeight : 40
  const containerHeight = tableContainer.clientHeight
  const visibleHeight = containerHeight - theadHeight
  const itemHeight = scrollItems[0]?.offsetHeight || 40
  const totalContentHeight = itemHeight * originalItemCount
  if (totalContentHeight <= visibleHeight) return
  const cloneCount = Math.ceil(visibleHeight / itemHeight) + 2
  for (let i = 0; i < cloneCount; i++) {
    const clone = scrollItems[i % originalItemCount].cloneNode(true)
    tbody.appendChild(clone)
  }
  let scrollPosition = 0
  const scrollSpeed = 1.5
  const pauseTime = 3000
  let isPaused = false
  let lastTimestamp = 0
  function scrollAnimation(timestamp) {
    if (!lastTimestamp) lastTimestamp = timestamp
    const deltaTime = timestamp - lastTimestamp
    lastTimestamp = timestamp
    if (!isPaused) {
      scrollPosition += scrollSpeed * (deltaTime / 16)
      const maxScroll = itemHeight * originalItemCount
      if (scrollPosition >= maxScroll) {
        scrollPosition = 0
        tableContainer.scrollTop = 0
      } else {
        tableContainer.scrollTop = scrollPosition
      }
    }
    progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)
  }
  progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)
  const pauseTimer = setInterval(() => {
    isPaused = !isPaused
  }, pauseTime)
  tableContainer._pauseTimer = pauseTimer
}

const progressStatisticsInfo = () => {
  getProgressStatistics()
    .then((res) => {
      if (!res || !res.data) return
      const obj = {
        totalOrderCount: res.data.totalOrderCount || 0,
        uncompletedOrderCount: res.data.uncompletedOrderCount || 0,
        partialCompletedOrderCount: res.data.partialCompletedOrderCount || 0,
        completedOrderCount: res.data.completedOrderCount || 0,
      }
      orderStatisticsObject.value = obj
      cardItems.value = [
        { label: '总订单数', value: obj.totalOrderCount, unit: '件' },
        { label: '未完成订单数', value: obj.uncompletedOrderCount, unit: '件' },
        { label: '部分完成订单数', value: obj.partialCompletedOrderCount, unit: '件' },
        { label: '已完成订单数', value: obj.completedOrderCount, unit: '件' },
      ]
      progressTableData.value = res.data.completedOrderDetails || []
      tableRowRefs.value = []
      rowsUnderHeader.value.clear()
      nextTick(() => {
        initProgressTableScroll()
      })
    })
    .catch((err) => {
      console.error('获取生产订单完成进度统计失败:', err)
    })
}

onMounted(() => {
  progressStatisticsInfo()
})

onBeforeUnmount(() => {
  if (progressTableScrollTimer.value) {
    cancelAnimationFrame(progressTableScrollTimer.value)
  }
  if (tableScrollTimeout.value) clearTimeout(tableScrollTimeout.value)
  const tableContainer = progressTableRef.value
  if (tableContainer?._pauseTimer) {
    clearInterval(tableContainer._pauseTimer)
  }
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 428px;
}

.progress-table-container {
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.progress-table-container::-webkit-scrollbar {
  display: none;
}

.progress-table {
  width: 100%;
  border-collapse: collapse;
  color: #b8c8e0;
  font-size: 12px;
  table-layout: fixed;
}

.progress-table thead {
  position: sticky;
  top: 0;
  background-color: rgba(26, 88, 176, 0.9);
  z-index: 10;
}

.progress-table th {
  padding: 8px 6px;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid rgba(184, 200, 224, 0.3);
  color: #b8c8e0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-table th:nth-child(1) {
  width: 15%;
}

.progress-table th:nth-child(2) {
  width: 15%;
}

.progress-table th:nth-child(3) {
  width: 15%;
}

.progress-table th:nth-child(4) {
  width: 12%;
}

.progress-table th:nth-child(5) {
  width: 12%;
}

.progress-table th:nth-child(6) {
  width: 31%;
}

.progress-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(184, 200, 224, 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  transition: opacity 0.3s ease;
}

.progress-table tbody tr:hover {
  background-color: rgba(184, 200, 224, 0.1);
}

.progress-table tbody tr.row-under-header {
  opacity: 0.5;
}

.progress-table :deep(.el-progress) {
  width: 100%;
}

.progress-table :deep(.el-progress-bar__outer) {
  background-color: rgba(184, 200, 224, 0.2);
}

.progress-table :deep(.el-progress__text) {
  color: #b8c8e0;
  font-size: 11px;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/center-center.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,193 @@
<template>
  <div>
    <!-- è®¾å¤‡ç»Ÿè®¡ -->
    <div class="equipment-stats">
      <div class="equipment-header">
        <img
          src="@/assets/BI/shujutongjiicon@2x.png"
          alt="图标"
          class="equipment-icon"
        />
        <span class="equipment-title">投入产出分析</span>
      </div>
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="lineLegend"
        :series="lineSeries"
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import Echarts from '@/components/Echarts/echarts.vue'
import { productInOutAnalysis } from '@/api/viewIndex.js'

const chartStyle = { width: '100%', height: '100%' }
const grid = {
  left: '3%',
  right: '4%',
  bottom: '3%',
  top: '16%',
  containLabel: true,
}

const lineLegend = {
  show: true,
  top: '2%',
  left: 'center',
  itemGap: 24,
  itemWidth: 12,
  itemHeight: 12,
  textStyle: { color: '#B8C8E0', fontSize: 14 },
  data: [
    { name: '出库', itemStyle: { color: 'rgba(11, 137, 254, 1)' } },
    { name: '入库', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
  ],
}

const xAxis1 = ref([
  {
    type: 'category',
    data: [],
    axisTick: { show: false },
    axisLine: { show: false, lineStyle: { color: 'rgba(184, 200, 224, 0.3)' } },
    axisLabel: { color: '#B8C8E0', fontSize: 12 },
    splitLine: { show: false, lineStyle: { type: 'dashed', color: 'rgba(184, 200, 224, 0.2)' } },
  },
])

const yAxis1 = [
  {
    type: 'value',
    name: '单位: ä»¶',
    nameTextStyle: { color: '#B8C8E0', fontSize: 12, padding: [0, 0, 0, 0] },
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0', fontSize: 12 },
    splitLine: { lineStyle: { color: '#B8C8E0' } },
  },
]

const lineSeries = ref([
  {
    name: '出库',
    type: 'line',
    smooth: false,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(11, 137, 254, 1)', width: 2 },
    itemStyle: { color: 'rgba(11, 137, 254, 1)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 137, 254, 0.40)' },
        { offset: 1, color: 'rgba(11, 137, 254, 0.05)' },
      ]),
    },
    data: [],
    emphasis: { focus: 'series' },
  },
  {
    name: '入库',
    type: 'line',
    smooth: false,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(11, 249, 254, 1)', width: 2 },
    itemStyle: { color: 'rgba(11, 249, 254, 1)', borderWidth: 0 },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(11, 249, 254, 0.5)' },
        { offset: 1, color: 'rgba(11, 249, 254, 0.05)' },
      ]),
    },
    data: [],
    emphasis: { focus: 'series' },
  },
])

const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'line' },
  borderWidth: 1,
  textStyle: { fontSize: 12 },
  formatter(params) {
    let result = params[0].axisValue + '<br/>'
    params.forEach((item) => {
      result += `${item.marker} ${item.seriesName}: ${item.value} ä»¶<br/>`
    })
    return result
  },
}

const fetchData = () => {
  productInOutAnalysis({ type: 1 })
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const list = res.data
        xAxis1.value[0].data = list.map((d) => d.date)
        lineSeries.value[0].data = list.map((d) => Number(d.outCount) || 0)
        lineSeries.value[1].data = list.map((d) => Number(d.inCount) || 0)
      }
    })
    .catch((err) => {
      console.error('获取投入产出分析失败:', err)
    })
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.equipment-stats {
  border: 1px solid #1a58b0;
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.equipment-header {
  font-weight: 500;
  font-size: 21px;
  display: flex;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      270deg,
      rgba(0, 126, 255, 0) 0%,
      rgba(0, 126, 255, 0.4549) 35%,
      #007eff 78%,
      #007eff 100%
    )
    1;
  padding-bottom: 2px;
}

.equipment-title {
  font-weight: 500;
  font-size: 18px;
  background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 50px;
}

.equipment-icon {
  width: 50px;
  height: 50px;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/center-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,137 @@
<template>
  <div>
    <!-- é¡¶éƒ¨ç»Ÿè®¡å¡ç‰‡ -->
    <div class="stats-cards">
      <div
        v-for="item in statItems"
        :key="item.name"
        class="stat-card"
      >
        <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        <div class="card-content">
          <span class="card-label">{{ item.name }}</span>
          <span class="card-value">{{ item.value }}</span>
          <div class="card-compare" :class="compareClass(Number(item.rate))">
            <span>同比</span>
            <span class="compare-value">{{ formatPercent(item.rate) }}</span>
            <span class="compare-icon">{{ Number(item.rate) >= 0 ? '↑' : '↓' }}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { salesPurchaseStorageProductCount } from '@/api/viewIndex.js'

const statItems = ref([])

const formatPercent = (val) => {
  const num = Number(val) || 0
  return `${num.toFixed(2)}%`
}

const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')

const fetchData = () => {
  salesPurchaseStorageProductCount()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        statItems.value = res.data.map((item) => ({
          name: item.name,
          value: item.value,
          rate: item.rate,
        }))
      }
    })
    .catch((err) => {
      console.error('获取销售/采购/储存产品数失败:', err)
    })
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.stats-cards {
  display: flex;
  gap: 30px;
}

.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  background-image: url('@/assets/BI/border@2x.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 142px;
}

.card-icon {
  width: 100px;
  height: 100px;
  margin: 20px 20px 0 10px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-value {
  font-weight: 500;
  font-size: 40px;
  background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-label {
  font-weight: 400;
  font-size: 19px;
  color: rgba(208, 231, 255, 0.7);
}

.card-compare {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #d0e7ff;
}

.card-compare > span:first-child {
  font-size: 13px;
  opacity: 0.8;
}

.compare-value {
  font-weight: 600;
}

.compare-icon {
  font-size: 14px;
  position: relative;
  top: -1px; /* è½»å¾®ä¸Šç§»ï¼Œè®©ç®­å¤´ä¸Žæ–‡å­—垂直居中对齐 */
}

.compare-up .compare-value,
.compare-up .compare-icon {
  color: #00c853;
}

.compare-down .compare-value,
.compare-down .compare-icon {
  color: #ff5252;
}

</style>

 src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,170 @@
<template>
  <div>
    <PanelHeader title="在制品统计分析" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="chart-wrapper">
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
          :grid="grid"
          :legend="workInProcessBarLegend"
          :series="workInProcessBarSeries"
          :tooltip="tooltip"
          :xAxis="workInProcessXAxis"
          :yAxis="workInProcessYAxis"
          :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
          style="height: 100%"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import { getWorkInProcessTurnover } from '@/api/viewIndex.js'

// åœ¨åˆ¶å“å‘¨è½¬ç»Ÿè®¡å¯¹è±¡
const workInProcessStatistics = ref({
  totalQuantity: 0,
  avgTurnoverDays: 0,
  turnoverEfficiency: 0,
})

// è½®æ’­å¡ç‰‡æ•°æ®ï¼ˆç”± workInProcessStatistics åŒæ­¥ï¼‰
const cardItems = ref([])

const chartStyle = {
  width: '100%',
  height: '100%',
}

const grid = {
  left: '3%',
  right: '4%',
  bottom: '3%',
  containLabel: true,
}

const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'shadow' },
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
    })
    return result
  },
}

// åœ¨åˆ¶å“å·¥åºæŸ±çŠ¶å›¾é…ç½®
const workInProcessXAxis = ref([
  {
    type: 'category',
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0' },
    data: [],
  },
])
const workInProcessYAxis = [
  {
    type: 'value',
    axisLabel: { color: '#B8C8E0' },
    name: '',
  },
]
const workInProcessBarLegend = {
  show: false,
  textStyle: { color: '#B8C8E0' },
  data: [],
}
const workInProcessBarSeries = ref([
  {
    name: '在制品数量',
    type: 'bar',
    barWidth: 25,
    barGap: 0,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
        { offset: 1, color: 'rgba(0,164,237,0)' },
        { offset: 0, color: '#4EE4FF' },
        ],
      },
    },
    label: {
      show: true,
      position: 'top',
      color: '#B8C8E0',
    },
    data: [],
  },
])

const workInProcessTurnoverInfo = () => {
  getWorkInProcessTurnover()
    .then((res) => {
      if (!res || !res.data) return
      const stats = {
        totalQuantity: res.data.totalOrderCount || 0,
        avgTurnoverDays: res.data.averageTurnoverDays || 0,
        turnoverEfficiency: res.data.turnoverEfficiency || 0,
      }
      workInProcessStatistics.value = stats
      cardItems.value = [
        { label: '总在制数量', value: stats.totalQuantity, unit: '件' },
        { label: '平均周转天数', value: stats.avgTurnoverDays, unit: '天' },
        { label: '周转效率', value: stats.turnoverEfficiency, unit: '%' },
      ]
      if (res.data.processDetails && Array.isArray(res.data.processDetails)) {
        workInProcessXAxis.value[0].data = res.data.processDetails
      } else {
        workInProcessXAxis.value[0].data = []
      }
      if (res.data.processQuantityDetails && Array.isArray(res.data.processQuantityDetails)) {
        workInProcessBarSeries.value[0].data = res.data.processQuantityDetails
      } else {
        workInProcessBarSeries.value[0].data = []
      }
    })
    .catch((err) => {
      console.error('获取在制品周转统计失败:', err)
    })
}

onMounted(() => {
  workInProcessTurnoverInfo()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
}

.chart-wrapper {
  height: 70%;
  flex: 1;
  min-height: 200px;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/left-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,205 @@
<template>
  <div>
    <PanelHeader title="工序产出分析" />
    <div class="main-panel panel-item-customers">
      <div class="filters-row">
        <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
      </div>
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="echartsRef"
          :chartStyle="chartStyle"
          :legend="pieLegend"
          :series="pieSeries"
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { productSalesAnalysis } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import DateTypeSwitch from '@/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue'

const dateType = ref(1) // 1=周 2=月 3=季度

function array2obj(array, key) {
  const resObj = {}
  for (let i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}

const chartStyle = {
  width: '100%',
  height: '100%',
}

const echartsRef = ref(null)
const pieDatas = ref([])
const pieColors = ['#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF', '#43e8fc', '#27EBE7']

const pieObjData = computed(() => array2obj(pieDatas.value, 'name'))

const pieLegend = computed(() => {
  const data = pieDatas.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      color: pieColors[idx % pieColors.length],
    },
  }))

  return {
    orient: 'vertical',
    top: 'center',
    left: '52%',
    itemGap: 30,
    data: data,
    formatter: function (name) {
      const item = pieObjData.value[name]
      if (!item) return name
      return `{title|${name}}{value|${item.value}}{unit|元}{percent|${item.rate}}{unit|%}`
    },
    textStyle: {
      rich: {
        value: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 10],
        },
        unit: {
          color: '#82baff',
          fontSize: 12,
          fontWeight: 600,
          padding: [0, 10, 0, 0],
        },
        percent: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 0],
        },
        title: {
          fontSize: 12,
          padding: [0, 0, 0, 0],
        },
      },
    },
  }
})

const pieTooltip = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c}元 ({d}%)',
}

const pieSeries = computed(() => [
  {
    name: '产品销售金额分析',
    type: 'pie',
    radius: '60%',
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
    },
    label: {
      show: false
    },
    minAngle: 15,
    data: pieDatas.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function () {
      return Math.random() * 200
    },
  },
])

const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}

const fetchData = () => {
  productSalesAnalysis()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const items = res.data
        pieDatas.value = items.map((item) => ({
          name: item.name,
          value: parseFloat(item.value) || 0,
          rate: item.rate,
        }))
      }
    })
    .catch((err) => {
      console.error('获取产品销售金额分析失败:', err)
    })
}

const handleDateTypeChange = () => {
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
}

.filters-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}

.pie-background {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-51.5%, -50%);
  width: 310px;
  height: 310px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,192 @@
<template>
  <div>
    <PanelHeader title="生产核算分析" />
    <div class="main-panel panel-item-customers">
      <div class="filters-row">
        <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
      </div>
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="barLegend"
        :series="chartSeries"
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { qualityStatistics } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import DateTypeSwitch from './DateTypeSwitch.vue'
import Echarts from '@/components/Echarts/echarts.vue'

const dateType = ref(1) // 1=周 2=月 3=季度

const chartStyle = {
  width: '100%',
  height: '140%',
}

const grid = { left: '10%', right: '4%', bottom: '3%', top: '10%', containLabel: true }

const barLegend = {
  show: true,
  textStyle: { color: '#B8C8E0' },
  data: ['产量', '工资', '合格率'],
}

// æŸ±çŠ¶å›¾ï¼šäº§é‡ã€å·¥èµ„；折线图：合格率（绿色）
const chartSeries = ref([
  {
    name: '产量',
    type: 'bar',
    barWidth: 20,
    barGap: '40%',
    yAxisIndex: 0,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 1, color: 'rgba(0, 164, 237, 0)' },
          { offset: 0, color: 'rgba(78, 228, 255, 1)' },
        ],
      },
    },
    data: [],
  },
  {
    name: '工资',
    type: 'bar',
    barGap: '40%',
    barWidth: 20,
    yAxisIndex: 1,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 1, color: 'rgba(83, 126, 245, 0.19)' },
          { offset: 0, color: 'rgba(144, 97, 248, 1)' },
        ],
      },
    },
    data: [],
  },
  {
    name: '合格率',
    type: 'line',
    yAxisIndex: 2,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 },
    itemStyle: { color: 'rgba(90, 216, 166, 1)' },
    data: [],
    emphasis: { focus: 'series' },
  },
])

const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'cross' },
  formatter(params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      let unit = '件'
      if (item.seriesName === '合格率') unit = '%'
      else if (item.seriesName === '工资') unit = '元'
      result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>`
    })
    return result
  },
}

const xAxis1 = ref([
  { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] },
])
const yAxis1 = [
  { type: 'value', name: '产量(件)', position: 'left', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
  { type: 'value', name: '工资(元)', position: 'left', offset: 50, axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
  {
    type: 'value',
    name: '合格率(%)',
    position: 'right',
    min: 0,
    max: 100,
    axisLabel: { color: '#B8C8E0', formatter: '{value}%' },
    nameTextStyle: { color: '#B8C8E0' },
    splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } },
  },
]

const handleDateTypeChange = () => {
  fetchData()
}

const fetchData = () => {
  qualityStatistics()
    .then((res) => {
      if (!res?.data?.item || !Array.isArray(res.data.item)) return
      const items = res.data.item
      xAxis1.value[0].data = items.map((d) => d.date)
      // äº§é‡ï¼šå‡ºåŽ‚æ•°
      chartSeries.value[0].data = items.map((d) => Number(d.factoryNum) || 0)
      // å·¥èµ„：暂无单独接口，用 0 å ä½ï¼ŒåŽç»­å¯æŽ¥å·¥èµ„接口
      chartSeries.value[1].data = items.map(() => 0)
      // åˆæ ¼çŽ‡ï¼šå‡ºåŽ‚æ•°/过程数*100（无单独接口时用此占位）
      chartSeries.value[2].data = items.map((d) => {
        const processNum = Number(d.processNum) || 0
        const factoryNum = Number(d.factoryNum) || 0
        if (processNum <= 0) return 0
        return Math.min(100, Math.round((factoryNum / processNum) * 100))
      })
    })
    .catch((err) => {
      console.error('获取产量、工资与合格率数据失败:', err)
    })
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filters-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/right-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,168 @@
<template>
  <div>
    <PanelHeader title="工单执行效率分析" />
    <div class="main-panel panel-item-customers">
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="barLegend"
        :series="chartSeries"
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { qualityStatistics } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'

const chartStyle = {
  width: '100%',
  height: '160%',
}

const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }

const barLegend = {
  show: true,
  textStyle: { color: '#B8C8E0' },
  data: ['开工', '完成', '良品率'],
}

// æŸ±çŠ¶å›¾ï¼šå¼€å·¥ã€å®Œæˆï¼›æŠ˜çº¿å›¾ï¼šè‰¯å“çŽ‡ï¼ˆé¢œè‰² rgba(90, 216, 166, 1)）
const chartSeries = ref([
  {
    name: '开工',
    type: 'bar',
    barWidth: 20,
    barGap: '40%',
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 1, color: 'rgba(0, 164, 237, 0)' },
          { offset: 0, color: 'rgba(78, 228, 255, 1)' },
        ],
      },
    },
    data: [],
  },
  {
    name: '完成',
    type: 'bar',
    barGap: '40%',
    barWidth: 20,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 1, color: 'rgba(83, 126, 245, 0.19)' },
          { offset: 0, color: 'rgba(144, 97, 248, 1)' },
        ],
      },
    },
    data: [],
  },
  {
    name: '良品率',
    type: 'line',
    yAxisIndex: 1,
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 },
    itemStyle: { color: 'rgba(90, 216, 166, 1)' },
    data: [],
    emphasis: { focus: 'series' },
  },
])

const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'cross' },
  formatter(params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      const unit = item.seriesName === '良品率' ? '%' : '件'
      result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>`
    })
    return result
  },
}

const xAxis1 = ref([
  { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] },
])
const yAxis1 = [
  { type: 'value', name: '件', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
  {
    type: 'value',
    name: '良品率(%)',
    min: 0,
    max: 100,
    axisLabel: { color: '#B8C8E0', formatter: '{value}%' },
    nameTextStyle: { color: '#B8C8E0' },
    splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } },
  },
]

const fetchData = () => {
  qualityStatistics()
    .then((res) => {
      if (!res?.data?.item || !Array.isArray(res.data.item)) return
      const items = res.data.item
      xAxis1.value[0].data = items.map((d) => d.date)
      // å¼€å·¥ï¼šè¿‡ç¨‹æ£€éªŒæ•°
      chartSeries.value[0].data = items.map((d) => Number(d.processNum) || 0)
      // å®Œæˆï¼šå‡ºåŽ‚æ•°
      chartSeries.value[1].data = items.map((d) => Number(d.factoryNum) || 0)
      // è‰¯å“çŽ‡ï¼šå‡ºåŽ‚æ•°/过程数*100（无单独接口时用此占位）
      chartSeries.value[2].data = items.map((d) => {
        const processNum = Number(d.processNum) || 0
        const factoryNum = Number(d.factoryNum) || 0
        if (processNum <= 0) return 0
        return Math.min(100, Math.round((factoryNum / processNum) * 100))
      })
    })
    .catch((err) => {
      console.error('获取开工与良品率数据失败:', err)
    })
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
}
</style>

 src/views/reportAnalysis/productionAnalysis/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,292 @@
<template>
  <div class="scale-container">
    <div class="data-dashboard" :style="{ transform: `scale(${scaleRatio})` }">
    <!-- å…¨å±æŒ‰é’® - ç§»åŠ¨åˆ°å·¦ä¸Šè§’ -->
    <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏显示'">
      <svg v-if="!isFullscreen" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
      </svg>
      <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
      </svg>
    </button>

    <!-- é¡¶éƒ¨æ ‡é¢˜æ  -->
    <div class="dashboard-header">
      <div class="factory-name">生产数据分析</div>
    </div>

    <!-- ä¸»è¦å†…容区域 -->
    <div class="dashboard-content">
      <!-- å·¦ä¾§åŒºåŸŸ -->
      <div class="left-panel">
        <LeftTop />

        <LeftBottom />
      </div>

      <!-- ä¸­é—´åŒºåŸŸ -->
      <div class="center-panel">
        <CenterTop />
        <CenterCenter/>
        <CenterBottom />
      </div>

      <!-- å³ä¾§åŒºåŸŸ -->
      <div class="right-panel">
        
        <RightTop />
        <RightBottom />
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import autofit from 'autofit.js'
import LeftBottom from './components/left-bottom.vue'
import CenterCenter from './components/center-center.vue'
import RightTop from './components/right-top.vue'
import RightBottom from './components/right-bottom.vue'
import useUserStore from '@/store/modules/user'
import LeftTop from './components/left-top.vue'
import CenterTop from './components/center-top.vue'
import CenterBottom from './components/center-bottom.vue'

// å…¨å±ç›¸å…³çŠ¶æ€
const isFullscreen = ref(false);

// ç¼©æ”¾æ¯”例
const scaleRatio = ref(1)
// è®¾è®¡å°ºå¯¸ï¼ˆåŸºå‡†å°ºå¯¸ï¼‰- æ ¹æ®å®žé™…设计稿调整
const designWidth = 1920
const designHeight = 1080

// ç”¨æˆ·store
const userStore = useUserStore()

// è®¡ç®—缩放比例
const calculateScale = () => {
  const container = document.querySelector('.scale-container')
  if (!container) return

  // èŽ·å–容器的实际尺寸
  const rect = container.getBoundingClientRect?.()
  const containerWidth = container.clientWidth || rect?.width || window.innerWidth
  const containerHeight = container.clientHeight || rect?.height || window.innerHeight

  // è®¡ç®—宽高缩放比例，取较小值以保证内容完整显示（等比缩放）
  const scaleX = containerWidth / designWidth
  const scaleY = containerHeight / designHeight
  scaleRatio.value = Math.min(scaleX, scaleY)
}

// çª—口大小变化处理
const handleResize = () => {
  // å»¶è¿Ÿæ‰§è¡Œï¼Œç¡®ä¿DOM更新完成
  setTimeout(() => {
    calculateScale()
  }, 100)
}

// å…¨å±åŠŸèƒ½å®žçŽ° - é’ˆå¯¹scale-container元素
const toggleFullscreen = () => {
  const element = document.querySelector('.scale-container')

  if (!element) return

  if (!isFullscreen.value) {
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }
}

// ç›‘听全屏变化事件
const handleFullscreenChange = () => {
  const fullscreenElement = document.fullscreenElement || 
                           document.webkitFullscreenElement || 
                           document.msFullscreenElement
  isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('scale-container')

  // å…¨å±çŠ¶æ€å˜åŒ–时，延迟重新计算缩放比例（确保DOM更新完成）
  setTimeout(() => {
    calculateScale()
  }, 200)
}

// ç”Ÿå‘½å‘¨æœŸé’©å­
onMounted(() => {
  // ä½¿ç”¨nextTick确保DOM完全渲染后再初始化
  nextTick(() => {
    // è®¡ç®—初始缩放比例
    calculateScale()
  })

  window.addEventListener('resize', handleResize)
  window.addEventListener('fullscreenchange', handleFullscreenChange)
  window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
  window.addEventListener('MSFullscreenChange', handleFullscreenChange)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  window.removeEventListener('fullscreenchange', handleFullscreenChange)
  window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
  window.removeEventListener('MSFullscreenChange', handleFullscreenChange)
  // ç§»é™¤æˆ‘们添加的autofit动态调整监听器
  if (window._autofitUpdateHandler) {
    window.removeEventListener('resize', window._autofitUpdateHandler)
    delete window._autofitUpdateHandler
  }
  // å…³é—­autofit
  autofit.off()
})
</script>

<style scoped>
/* å¤–部缩放容器 - å æ®æ•´ä¸ªè§†å£ */
.scale-container {
position: relative;
width: 100%;
/* é¡µé¢åœ¨å¸¸è§„布局下（有顶栏）默认减去 84px，避免内容被裁切 */
height: calc(100vh - 84px);
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
overflow: hidden;
}

/* å†…部内容区域 - å›ºå®šè®¾è®¡å°ºå¯¸ */
.data-dashboard {
position: relative;
width: 1920px;
height: 1080px;
background-image: url("@/assets/BI/backImage@2x.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform-origin: center center;
}

/* å…¨å±çŠ¶æ€çš„样式 - ä½œç”¨äºŽscale-container */
.scale-container:fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #000;
z-index: 9999;
}

/* Webkit浏览器前缀 */
.scale-container:-webkit-full-screen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #000;
z-index: 9999;
}

/* MS浏览器前缀 */
.scale-container:-ms-fullscreen {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #000;
z-index: 9999;
}


.dashboard-header {
position: relative;
z-index: 1;
height: 86px;
background-image: url("@/assets/BI/biaoti.png");
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}

.factory-name {
font-weight: 600;
font-size: 52px;
color: #FFFFFF;
top: 16px;
position: absolute;
}

.fullscreen-btn {
position: absolute;
top: 10px;
left: 20px;
width: 40px;
height: 40px;
background: rgba(0, 20, 60, 0.8);
border: 1px solid rgba(0, 212, 255, 0.3);
border-radius: 6px;
color: #00d4ff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
z-index: 10000;
}

.fullscreen-btn:hover {
background: rgba(0, 30, 90, 0.9);
border-color: rgba(0, 212, 255, 0.5);
}

.dashboard-content {
position: relative;
z-index: 1;
display: flex;
gap: 30px;
padding: 0 30px;
height: calc(100% - 86px);
overflow: hidden;
}

/* ç¡®ä¿å„面板能够正确显示 */
.left-panel, .center-panel, .right-panel {
overflow: hidden;
}

.left-panel,
.right-panel {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
width: 520px;
}

.center-panel {
flex: 1.5;
display: flex;
flex-direction: column;
gap: 20px;
}

</style>