Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-ma...

huminmin

昨天 3bc5236c5ff1b8b7f6b71648836b265446f39afc

Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New

 src/api/safeProduction/hazardousMaterialsControl.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,33 @@
import request from "@/utils/request";

export function safeHazardRecordListPage(query) {
  return request({
    url: "/safeHazardRecord/page",
    method: "get",
    params: query,
  });
}

export function safeHazardRecordDel(ids) {
    return request({
        url: '/safeHazardRecord/' + ids,
        method: 'delete',
        data: ids
    })
}
// æ–°å¢žå±é™©æºå°è´¦
export function safeHazardRecordAdd(query) {
    return request({
        url: '/safeHazardRecord/borrow',
        method: 'post',
        data: query
    })
}

export function safeHazardRecordUpdate(query) {
    return request({
        url: '/safeHazardRecord/return',
        method: 'put',
        data: query
    })
}

 src/views/procurementManagement/invoiceEntry/components/Modal.vue

@@ -411,13 +411,15 @@
                    item.futureTicketsAmount !== undefined ? item.futureTicketsAmount : (item.taxInclusiveTotalPrice || 0)
                );

                // æ–°å¢žæ—¶ï¼šæœ¬æ¬¡å¼€ç¥¨é»˜è®¤ä¸å¡«ï¼ˆ0），避免一打开就把“未来票数”扣成 0
                item.ticketsNum = 0;
                item.ticketsAmount = 0;

                // é¡µé¢å±•ç¤ºçš„“未来票数/未来票金额”默认展示原始未来值
                item.futureTickets = item.tempFutureTickets;
                item.futureTicketsAmount = item.tempFutureTicketsAmount;
                // æ–°å¢žæ—¶ï¼šæœ¬æ¬¡å¼€ç¥¨æ•°é»˜è®¤ = æœªæ¥ç¥¨æ•°ï¼ˆä¸”不能大于未来票数）
                item.ticketsNum = Number(item.tempFutureTickets || 0);
                // è”动计算本次开票金额、未来票数、未来票金额
                const unitPrice = Number(item.taxInclusiveUnitPrice || 0);
                item.ticketsAmount = Number((item.ticketsNum * unitPrice).toFixed(2));
                item.futureTickets = Number((item.tempFutureTickets - item.ticketsNum).toFixed(2));
                item.futureTicketsAmount = Number(
                    (item.tempFutureTicketsAmount - item.ticketsAmount).toFixed(2)
                );
            });
            
            form.productData = allProductData;
@@ -426,7 +428,7 @@
            const totalAmount = allProductData.reduce((sum, item) => {
                return sum + (Number(item.ticketsAmount) || 0);
            }, 0);
            form.invoiceAmount = totalAmount.toFixed(2);
            form.invoiceAmount = Number(totalAmount.toFixed(2));
            
            // å­˜å‚¨é€‰ä¸­çš„合同数据
            selectedContracts.value = selectedRows;
@@ -467,11 +469,11 @@
        row.ticketsNum = Number(row.tempFutureTickets || 0);
    }
    // è®¡ç®—本次来票金额
    row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2)
    row.ticketsAmount = Number((Number(row.ticketsNum) * Number(row.taxInclusiveUnitPrice || 0)).toFixed(2));
    // è®¡ç®—未来票数
    row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
    row.futureTickets = Number((Number(row.tempFutureTickets || 0) - Number(row.ticketsNum || 0)).toFixed(2));
    // è®¡ç®—未来票金额
    row.futureTicketsAmount = (row.tempFutureTicketsAmount - row.ticketsAmount).toFixed(2)
    row.futureTicketsAmount = Number((Number(row.tempFutureTicketsAmount || 0) - Number(row.ticketsAmount || 0)).toFixed(2));
    calculateinvoiceAmount();
};

@@ -494,12 +496,12 @@
        proxy.$modal.msgWarning("本次开票数不能大于未来票数");
        row.ticketsNum = Number(row.tempFutureTickets || 0);
        // é‡æ–°è®¡ç®—本次来票金额
        row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2);
        row.ticketsAmount = Number((Number(row.ticketsNum) * Number(row.taxInclusiveUnitPrice || 0)).toFixed(2));
    }
    // è®¡ç®—未来票数
    row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
    row.futureTickets = Number((Number(row.tempFutureTickets || 0) - Number(row.ticketsNum || 0)).toFixed(2));
    // è®¡ç®—未来票金额
    row.futureTicketsAmount = (row.tempFutureTicketsAmount - row.ticketsAmount).toFixed(2)
    row.futureTicketsAmount = Number((Number(row.tempFutureTicketsAmount || 0) - Number(row.ticketsAmount || 0)).toFixed(2));
    calculateinvoiceAmount();
};

@@ -510,7 +512,7 @@
            invoiceAmountTotal += Number(item.ticketsAmount);
        }
    });
    form.invoiceAmount = invoiceAmountTotal.toFixed(2);
    form.invoiceAmount = Number(invoiceAmountTotal.toFixed(2));
};

const open = async (type, selectedRows) => {
@@ -518,9 +520,15 @@
    
    // å¦‚果是批量操作，设置标题
    if (Array.isArray(selectedRows) && selectedRows.length > 1) {
        modalOptions.title = `批量新增 (${selectedRows.length}条)`;
        modalOptions.value = {
            ...(modalOptions.value || {}),
            title: `批量新增 (${selectedRows.length}条)`,
        };
    } else {
        modalOptions.title = type === "add" ? "新增" : "编辑";
        modalOptions.value = {
            ...(modalOptions.value || {}),
            title: type === "add" ? "新增" : "编辑",
        };
    }
    
    // å¦‚果是单个操作，获取id

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

@@ -51,8 +51,8 @@
  itemHeight: 12,
  textStyle: { color: '#B8C8E0', fontSize: 14 },
  data: [
    { name: '出库', itemStyle: { color: '#4EE4FF' } },
    { name: '入库', itemStyle: { color: '#00D68F' } },
    { name: '出库', itemStyle: { color: 'rgba(11, 137, 254, 1)' } },
    { name: '入库', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
  ],
}


 src/views/reportAnalysis/financialAnalysis/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/financialAnalysis/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/financialAnalysis/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/financialAnalysis/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/financialAnalysis/components/center-bottom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,94 @@
<template>
  <div>
    <PanelHeader title="利润趋势" />
    <div class="main-panel panel-item-customers">
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="barLegend"
        :series="barSeries1"
        :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 Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'

const chartStyle = { width: '100%', height: '150%' }
const grid = { left: '3%', right: '4%', bottom: '3%', top: '4%', containLabel: true }
const barLegend = { show: false, textStyle: { color: '#B8C8E0' }, data: ['利润'] }
const barSeries1 = ref([
  {
    name: '利润',
    type: 'bar',
    barGap: 0,
    barWidth: 30,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0, y: 1, x2: 0, y2: 0,
        colorStops: [
          { offset: 0, color: 'rgba(0,164,237,0)' },
          { offset: 1, color: '#4EE4FF' },
        ],
      },
    },
    data: [],
  },
])

const xAxis1 = ref([
  {
    type: 'category',
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0' },
    data: [],
  },
])

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

const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]

onMounted(() => {
  // å…ˆç”¨æœ¬åœ°å‡æ•°æ®ï¼ˆåŽç»­å¦‚有接口可替换）
  xAxis1.value[0].data = ['1月', '2月', '3月', '4月', '5月', '6月']
  barSeries1.value[0].data = [12000, 18000, 9000, 16000, 14000, 20000]
})
</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;
}
</style>


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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,183 @@
<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'

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' },
  formatter(params) {
    let result = params[0].axisValue + '<br/>'
    params.forEach((item) => {
      result += `${item.marker} ${item.seriesName}: ${item.value} å…ƒ<br/>`
    })
    return result
  },
}

// å…ˆç”¨æœ¬åœ°å‡æ•°æ®ï¼ˆåŽç»­å¦‚有接口可直接替换这里）
const setMockData = () => {
  const dates = ['1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28']
  xAxis1.value[0].data = dates
  lineSeries.value[0].data = [1200, 1800, 900, 1600, 1400, 2000, 1700] // æ”¶å…¥
  lineSeries.value[1].data = [800, 1100, 700, 1200, 1000, 1500, 1300] // æ”¯å‡º
}

onMounted(() => {
  setMockData()
})
</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/financialAnalysis/components/center-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,210 @@
<template>
  <div>
    <!-- é¡¶éƒ¨æ”¶æ”¯å¡ç‰‡ -->
    <div class="finance-cards">
      <!-- æœˆåº¦æ”¶å…¥ -->
      <div class="finance-card income-card">
        <div class="icon-box">
          <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        </div>
        <div class="card-body">
          <div class="card-left">
            <div class="card-title">月度收入</div>
            <div class="card-amount">{{ income.amount }}</div>
          </div>
          <div class="card-right">
            <div class="metric-row">
              <span class="metric-label">回款率</span>
              <span class="metric-value" :class="metricClass(income.repayRate)">
                {{ formatPercent(income.repayRate.value) }}
                <span class="arrow">{{ metricArrow(income.repayRate) }}</span>
              </span>
            </div>
            <div class="metric-row">
              <span class="metric-label">逾期数</span>
              <span class="metric-value metric-up">{{ income.overdueCount }}</span>
            </div>
            <div class="metric-row">
              <span class="metric-label">逾期率</span>
              <span class="metric-value" :class="metricClass(income.overdueRate)">
                {{ formatPercent(income.overdueRate.value) }}
                <span class="arrow">{{ metricArrow(income.overdueRate) }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- æœˆåº¦æ”¯å‡º -->
      <div class="finance-card expense-card">
        <div class="icon-box">
          <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        </div>
        <div class="card-body">
          <div class="card-left">
            <div class="card-title">月度支出</div>
            <div class="card-amount">{{ expense.amount }}</div>
          </div>
          <div class="card-right">
            <div class="metric-row">
              <span class="metric-label">净利润</span>
              <span class="metric-value metric-down">{{ expense.netProfit }}</span>
            </div>
            <div class="metric-row">
              <span class="metric-label">毛利润</span>
              <span class="metric-value metric-down">{{ expense.grossProfit }}</span>
            </div>
            <div class="metric-row">
              <span class="metric-label">利润率</span>
              <span class="metric-value" :class="metricClass(expense.profitRate)">
                {{ formatPercent(expense.profitRate.value) }}
                <span class="arrow">{{ metricArrow(expense.profitRate) }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

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

// æš‚时使用本地示例数据，后续可接真实接口覆盖
const income = ref({
  amount: 102,
  repayRate: { value: 52, trend: 1 }, // æ­£å‘ â†‘
  overdueCount: 10092,
  overdueRate: { value: 12, trend: 1 },
})

const expense = ref({
  amount: 102,
  netProfit: 291013,
  grossProfit: 10092,
  profitRate: { value: 12, trend: -1 }, // è´Ÿå‘ â†“
})

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

const metricClass = (metric) =>
  Number(metric.trend) >= 0 ? 'metric-up' : 'metric-down'

const metricArrow = (metric) =>
  Number(metric.trend) >= 0 ? '↑' : '↓'
</script>

<style scoped>
.finance-cards {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

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

.icon-box {
  width: 92px;
  height: 92px;
  /* border: 1px dashed rgba(208, 231, 255, 0.55); */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
}

.card-icon {
  width: 78px;
  height: 78px;
}

.card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.card-left {
  min-width: 90px;
}

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

.card-amount {
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  margin-top: 8px;
  background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 6px;
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #d0e7ff;
  white-space: nowrap;
}

.metric-label {
  margin-right: 12px;
}

.metric-label {
  opacity: 0.8;
}

.metric-value {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.metric-value .arrow {
  font-size: 13px;
  margin-left: 4px;
}

.metric-up {
  color: #00c853;
}

.metric-down {
  color: #ff5252;
}


</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,243 @@
<template>
  <div>
    <PanelHeader title="支出构成分析" />
    <div class="main-panel panel-item-customers">
      <!-- <CarouselCards :items="cardItems" :visible-count="3" /> -->
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
          :legend="landLegend"
          :series="landSeries"
          :tooltip="landTooltip"
          :color="landColors"
          :options="pieOptions"
          style="height: 320px"
          class="land-chart"
        />
      </div>
    </div>
  </div>
</template>

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

/**
 * @introduction æŠŠæ•°ç»„中key值相同的那一项提取出来，组成一个对象
 * @param {参数类型} array ä¼ å…¥çš„数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
 * @param {参数类型} key  å±žæ€§å a
 * @return {返回类型说明}
 */
function array2obj(array, key) {
  const resObj = {}
  for (let i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}

// æ•°æ®åˆ—表（来自接口）
const dataList = ref([])

// å¡ç‰‡æ•°æ®
const cardItems = ref([])

// é¢œè‰²åˆ—表
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']

const landObjData = computed(() => array2obj(dataList.value, 'name'))

// å›¾ä¾‹é…ç½®ï¼ˆå³ä¾§ç«–排）
const landLegend = computed(() => {
  const data = dataList.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      color: landColors[idx % landColors.length],
    },
  }))

  return {
    orient: 'vertical',
    top: 'center',
    left: '52%',
    itemGap: 30,
    show: false,
    data: data,
    formatter: function (name) {
      const item = landObjData.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 landTooltip = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c}元 ({d}%)',
}

// åŒå±‚环形饼图
const landSeries = ref([
  {
    name: '产品采购金额分析',
    type: 'pie',
    radius: ['50%', '75%'],
    center: ['50%', '60%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
      color: function (params) {
        return landColors[params.dataIndex % landColors.length]
      },
    },
    label: {
      show: true,
      position: 'outside',
      color: '#fff',
      fontSize: 12,
      lineHeight: 18,
      // rich: {
      //   ...dotRich,
      //   parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
      //   child: { fontSize: 12, color: '#fff', lineHeight: 18 },
      // },
    },
    minAngle: 15,
    data: dataList.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function () {
      return Math.random() * 200
    },
  },
  {
    // å†…圈
    type: 'pie',
    radius: ['50%', '60%'],
    center: ['50%', '60%'],
    silent: true,
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    itemStyle: {
      color: 'rgba(0, 127, 255, 0.25)',
    },
    data: [1],
  },
])

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

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

const fetchData = () => {
  rawMaterialPurchaseAmountRatio()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const items = res.data
        cardItems.value = items.map((item) => ({
          label: item.name,
          value: item.value,
          unit: '元',
          rate: item.rate,
        }))
        dataList.value = items.map((it) => ({
          name: it.name,
          value: parseFloat(it.value) || 0,
          rate: it.rate,
          children: [],
        }))
        landSeries.value[0].data = dataList.value
      }
    })
    .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;
}

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


.pie-background {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-51.5%, -50%);
  width: 380px;
  height: 380px;
  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/financialAnalysis/components/left-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,105 @@
<template>
  <div>
    <PanelHeader title="回款与开票分析" />
    <div class="main-panel panel-item-customers">
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="barLegend"
        :series="barSeries1"
        :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 { productSalesAnalysis } 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: ['金额'] }
const barSeries1 = ref([
  {
    name: '金额',
    type: 'bar',
    barGap: 0,
    barWidth: 30,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 1, color: '#00A4ED' },
          { offset: 0, color: '#4EE4FF' },
        ],
      },
    },
    data: [],
  },
])

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

const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }])
const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]

const fetchData = () => {
  productSalesAnalysis()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const items = res.data
      xAxis1.value[0].data = items.map((item) => item.name)
      barSeries1.value[0].data = items.map((item) => parseFloat(item.value) || 0)
      }
    })
    .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/financialAnalysis/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,291 @@
<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">
        <RightBottom />
        <RightTop />
      </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 '../dataDashboard/components/basic/right-top.vue'
import RightBottom from '../dataDashboard/components/basic/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>

 src/views/safeProduction/dangerInvestigation/index.vue

@@ -215,7 +215,7 @@
                          prop="createUser">
              <el-select v-model="form.createUser"
                         placeholder="请选择"
                         @change="handleChange"
                         disabled
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
@@ -228,14 +228,13 @@
            <el-form-item label="上报时间："
                          prop="createTime">
              <el-date-picker style="width: 100%"
                              readonly
                              disabled
                              v-model="form.createTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable
                              :disabled="operationType === 'view'" />
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
@@ -263,8 +262,7 @@
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable
                              :disabled="operationType === 'view'" />
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
@@ -345,8 +343,7 @@
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable
                              :disabled="operationType === 'view'" />
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
@@ -586,12 +583,6 @@
    customer: "",
  });

  const handleChange = userId => {
    const selectedUser = userList.value.find(user => user.userId === userId);
    if (selectedUser) {
      form.value.createUserName = selectedUser.nickName;
    }
  };
  const handleChange2 = userId => {
    const selectedUser = userList.value.find(user => user.userId === userId);
    if (selectedUser) {
@@ -722,8 +713,8 @@
        hiddenCode: "", // éšæ‚£ç¼–号
        location: "", // éšæ‚£ä½ç½®
        hiddenDesc: "", // éšæ‚£æè¿°
        createUser: "", // ä¸ŠæŠ¥äºº
        createUserName: "",
        createUser: Number(currentUserId.value), // ä¸ŠæŠ¥äºº
        createUserName: currentUserName.value,
        createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // ä¸ŠæŠ¥æ—¶é—´
        rectifyUserId: "", // æ•´æ”¹è´£ä»»äºº
        rectifyUserName: "",
@@ -952,9 +943,11 @@
    });
  };
  const currentUserId = ref("");
  const currentUserName = ref("");
  const getCurrentFactoryName = async () => {
    let res = await userStore.getInfo();
    currentUserId.value = res.user.userId;
    currentUserName.value = res.user.nickName;
  };

  /**

 src/views/safeProduction/hazardousMaterialsControl/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,891 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">危险源名称：</span>
        <el-input v-model="searchForm.name"
                  style="width: 240px"
                  placeholder="请输入危险源名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title ml10">危险源类型：</span>
        <el-select v-model="searchForm.type"
                   clearable
                   @change="handleQuery"
                   style="width: 240px">
          <el-option v-for="item in knowledgeTypeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">
          æœç´¢
        </el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">去领用</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination1"
                :total="page.total"></PIMTable>
    </div>
    <!-- æ–°å¢ž/编辑知识弹窗 -->
    <el-dialog v-model="dialogVisible"
               :title="dialogTitle"
               width="800px"
               :close-on-click-modal="false">
      <el-form ref="formRef"
               v-if="dialogType === 'add'"
               :model="form"
               :rules="rules"
               label-width="140px"
               label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="危险源"
                          prop="safeHazardId">
              <el-input v-model="valueItem.name"
                        readonly
                        @click="openSafeHazardSelect"
                        placeholder="请选择危险源" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在位置"
                          prop="location">
              <el-input v-model="valueItem.location"
                        disabled
                        placeholder="自动带出" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="危险源类型"
                          prop="type">
              <el-input v-model="valueItem.type"
                        disabled
                        placeholder="自动带出" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="风险等级"
                          prop="riskLevel">
              <el-input v-model="valueItem.riskLevel"
                        disabled
                        placeholder="自动带出" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="库存数量"
                          prop="stockQty">
              <el-input v-model="valueItem.stockQty"
                        disabled
                        placeholder="自动带出" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="领用用途"
                          prop="applyPurpose">
              <el-input v-model="form.applyPurpose"
                        placeholder="请输入领用用途" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用数量"
                          prop="applyQty">
              <el-input v-model="form.applyQty"
                        type="number"
                        min="0"
                        @input="handleApplyQtyChange"
                        placeholder="请输入领用数量" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="领用人"
                          prop="applyUserId">
              <el-select v-model="form.applyUserId"
                         disabled
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用时间"
                          prop="applyTime">
              <el-date-picker style="width: 100%"
                              disabled
                              v-model="form.applyTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-descriptions :column="2"
                       style="margin-bottom: 20px"
                       v-if="dialogType === 'edit' || dialogType === 'view'"
                       border>
        <el-descriptions-item label="危险源编码">
          <span>{{ form.code }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="危险源名称">
          <span>{{ form.name }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="危险源类型">
          <span>{{ getTypeLabel(form.type) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="所在位置">
          <span>{{ form.location }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="风险等级">
          <el-tag :type="getTypeTagType(form.riskLevel)">
            {{ form.riskLevel }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="领用用途">
          <span>{{ form.applyPurpose }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="领用时间">
          <span>{{ form.applyTime }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="领用数量">
          <span>{{ form.applyQty }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="领用人">
          <span>{{ form.applyUserName }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="dialogType === 'view' && form.returnUserId"
                              label="归还人">
          <span>{{ form.returnUserName }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="dialogType === 'view' && form.returnTime"
                              label="归还时间">
          <span>{{ form.returnTime }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="dialogType === 'view' && form.returnUserId"
                              label="归还情况说明">
          <span>{{ form.returnRemark }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-form ref="formRef1"
               v-if="dialogType === 'edit'"
               :model="form"
               :rules="rules1"
               label-width="140px"
               label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="归还人"
                          prop="returnUserId">
              <el-select v-model="form.returnUserId"
                         disabled
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in userList"
                           :key="item.userId"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归还时间"
                          prop="returnTime">
              <el-date-picker style="width: 100%"
                              disabled
                              v-model="form.returnTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="归还情况说明"
                      prop="applyPurpose">
          <el-input v-model="form.returnRemark"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入归还情况说明" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- å±é™©æºé€‰æ‹©å¼¹çª— -->
    <el-dialog v-model="safeHazardSelectVisible"
               title="选择危险源"
               width="800px"
               :close-on-click-modal="false">
      <div>
        <el-table :data="safeHazardList"
                  border
                  v-loading="safeHazardLoading"
                  style="width: 100%"
                  @row-click="handleSafeHazardSelect">
          <el-table-column prop="code"
                           label="危险源编码"
                           width="180"
                           show-overflow-tooltip />
          <el-table-column prop="name"
                           label="危险源名称"
                           show-overflow-tooltip />
          <el-table-column prop="type"
                           label="危险源类型"
                           width="120"
                           show-overflow-tooltip>
            <template #default="scope">
              {{ getTypeLabel(scope.row.type) }}
            </template>
          </el-table-column>
          <el-table-column prop="location"
                           label="所在位置"
                           width="180"
                           show-overflow-tooltip />
          <el-table-column prop="riskLevel"
                           label="风险等级"
                           width="100">
            <template #default="scope">
              <el-tag :type="getTypeTagType(scope.row.riskLevel)">
                {{ scope.row.riskLevel }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="stockQty"
                           label="库存数量"
                           width="100" />
        </el-table>
        <pagination :total="safeHazardPage.total"
                    style="margin-top: 20px"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page="safeHazardPage.current"
                    :limit="safeHazardPage.size"
                    @pagination="safeHazardPagination" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="safeHazardSelectVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { Search } from "@element-plus/icons-vue";
  import {
    onMounted,
    ref,
    reactive,
    toRefs,
    getCurrentInstance,
    computed,
  } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";
  import pagination from "@/components/PIMTable/Pagination.vue";
  import { userListNoPage } from "@/api/system/user.js";
  import { safeHazardListPage } from "@/api/safeProduction/hazardSourceLedger.js";
  import {
    safeHazardRecordListPage,
    safeHazardRecordDel,
    safeHazardRecordAdd,
    safeHazardRecordUpdate,
  } from "@/api/safeProduction/hazardousMaterialsControl.js";
  import dayjs from "dayjs";
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
  // è¡¨å•éªŒè¯è§„则
  const rules = {
    applyPurpose: [
      { required: true, message: "请输入领用用途", trigger: "blur" },
    ],
    applyQty: [{ required: true, message: "请输入领用数量", trigger: "blur" }],
    safeHazardId: [
      { required: true, message: "请选择危险源", trigger: "change" },
    ],
  };
  const rules1 = {
    returnRemark: [
      { required: true, message: "请输入归还情况说明", trigger: "blur" },
    ],
  };
  // å“åº”式数据
  const data = reactive({
    searchForm: {
      name: "",
      type: "",
    },
    tableLoading: false,
    page: {
      current: 1,
      size: 20,
      total: 0,
    },
    tableData: [],
    selectedIds: [],
    form: {
      applyPurpose: "", // é¢†ç”¨ç”¨é€”
      applyTime: "", // é¢†ç”¨æ—¶é—´
      applyQty: "", // é¢†ç”¨æ•°é‡
      applyUserId: "", // é¢†ç”¨äººID
      safeHazardId: "", // å±é™©æºID
    },
    dialogVisible: false,
    dialogTitle: "",
    dialogType: "add",
    viewDialogVisible: false,
    currentKnowledge: {},
    safeHazardSelectVisible: false,
    safeHazardList: [],
    safeHazardLoading: false,
    safeHazardPage: {
      current: 1,
      size: 10,
      total: 0,
    },
  });

  const {
    searchForm,
    tableLoading,
    page,
    tableData,
    selectedIds,
    form,
    dialogVisible,
    dialogTitle,
    dialogType,
    viewDialogVisible,
    currentKnowledge,
    safeHazardSelectVisible,
    safeHazardList,
    safeHazardLoading,
    safeHazardPage,
  } = toRefs(data);
  const valueItem = ref({});

  // è¡¨å•å¼•ç”¨
  const formRef = ref();
  const formRef1 = ref();
  const riskLevelOptions = ref([
    { value: "低风险", label: "低风险" },
    { value: "一般风险", label: "一般风险" },
    { value: "较大风险", label: "较大风险" },
    { value: "重大风险", label: "重大风险" },
  ]);

  // è¡¨æ ¼åˆ—配置
  const tableColumn = ref([
    {
      label: "危险源编码",
      prop: "code",
      showOverflowTooltip: true,
    },
    {
      label: "危险源名称",
      prop: "name",
      showOverflowTooltip: true,
    },
    {
      label: "危险源类型",
      prop: "type",
      showOverflowTooltip: true,
      formatData: params => {
        return getTypeLabel(params);
      },
    },
    {
      label: "风险等级",
      prop: "riskLevel",
      showOverflowTooltip: true,
      dataType: "tag",
      formatType: params => {
        const typeMap = {
          ä½Žé£Žé™©: "info",
          ä¸€èˆ¬é£Žé™©: "info",
          è¾ƒå¤§é£Žé™©: "warning",
          é‡å¤§é£Žé™©: "danger",
        };
        return typeMap[params] || "info";
      },
    },
    {
      label: "领用用途",
      prop: "applyPurpose",
      showOverflowTooltip: true,
    },
    {
      label: "领用时间",
      prop: "applyTime",
      showOverflowTooltip: true,
    },
    {
      label: "领用数量",
      prop: "applyQty",
      showOverflowTooltip: true,
    },
    {
      label: "归还时间",
      prop: "returnTime",
      showOverflowTooltip: true,
    },
    {
      label: "归还人",
      prop: "returnUserName",
      showOverflowTooltip: true,
    },
    {
      label: "归还情况说明",
      prop: "returnRemark",
      showOverflowTooltip: true,
    },
    {
      label: "所在位置",
      prop: "location",
      showOverflowTooltip: true,
    },
    {
      label: "单号",
      prop: "materialRecordCode",
      showOverflowTooltip: true,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 200,
      operation: [
        {
          name: "归还",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
          disabled: row => row.returnUserId,
        },
        {
          name: "查看",
          type: "text",
          clickFun: row => {
            openForm("view", row);
          },
        },
      ],
    },
  ]);
  const userList = ref([]);
  // ç”Ÿå‘½å‘¨æœŸ
  onMounted(() => {
    getCurrentFactoryName();
    getList();
    startAutoRefresh();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
  });
  const currentUserId = ref("");
  const currentUserName = ref("");
  const getCurrentFactoryName = async () => {
    let res = await userStore.getInfo();
    currentUserId.value = res.user.userId;
    currentUserName.value = res.user.nickName;
  };

  // å¤„理用户选择变化
  const handleUserChange = userId => {
    const selectedUser = userList.value.find(user => user.userId === userId);
    if (selectedUser) {
      form.value.principalUser = selectedUser.nickName;
      form.value.principalMobile = selectedUser.phonenumber;
    }
  };
  const handleApplyQtyChange = () => {
    if (form.value.applyQty > valueItem.value.stockQty) {
      ElMessage.error("领用数量不能大于库存数量");
      form.value.applyQty = "";
    }
  };

  // å¼€å§‹è‡ªåŠ¨åˆ·æ–°
  const startAutoRefresh = () => {
    setInterval(() => {
      getList();
    }, 600000); // 10分钟刷新一次 (10 * 60 * 1000 = 600000ms)
  };

  // æŸ¥è¯¢æ•°æ®
  const handleQuery = () => {
    page.value.current = 1;
    getList();
  };

  const getList = () => {
    tableLoading.value = true;
    safeHazardRecordListPage({ ...page.value, ...searchForm.value })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.value.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };
  const openSafeHazardSelect = async () => {
    await fetchSafeHazardList();
    safeHazardSelectVisible.value = true;
  };

  const fetchSafeHazardList = () => {
    safeHazardLoading.value = true;
    return safeHazardListPage({
      page: safeHazardPage.value.current,
      size: safeHazardPage.value.size,
    })
      .then(res => {
        safeHazardList.value = res.data.records;
        safeHazardPage.value.total = res.data.total;
      })
      .finally(() => {
        safeHazardLoading.value = false;
      });
  };

  const handleSafeHazardSelect = item => {
    valueItem.value = {
      ...item,
    };
    valueItem.value.type = getTypeLabel(valueItem.value.type);
    form.value.safeHazardId = item.id;
    safeHazardSelectVisible.value = false;
  };

  const safeHazardPagination = obj => {
    safeHazardPage.value.current = obj.page;
    safeHazardPage.value.size = obj.limit;
    fetchSafeHazardList();
  };

  // åˆ†é¡µå¤„理
  const pagination1 = obj => {
    page.value.current = obj.page;
    page.value.size = obj.limit;
    handleQuery();
  };

  // é€‰æ‹©å˜åŒ–处理
  const handleSelectionChange = selection => {
    selectedIds.value = selection.map(item => item.id);
  };

  // æ‰“开表单
  const openForm = (type, row = null) => {
    dialogType.value = type;
    if (type === "add") {
      dialogTitle.value = "领用危险源";
      // é‡ç½®è¡¨å•
      form.value = {};
      Object.assign(form.value, {
        applyPurpose: "", // é¢†ç”¨ç”¨é€”
        applyTime: dayjs().format("YYYY-MM-DD"), // é¢†ç”¨æ—¶é—´
        applyQty: "", // é¢†ç”¨æ•°é‡
        applyUserId: currentUserId.value, // é¢†ç”¨äººID
        safeHazardId: "", // å±é™©æºID
      });
      valueItem.value = {};
    } else if (type === "edit" && row) {
      dialogTitle.value = "归还";
      Object.assign(form.value, {
        id: row.id, // ä¸»é”®ID
        materialRecordCode: row.materialRecordCode, // å•å·
        applyPurpose: row.applyPurpose, // é¢†ç”¨ç”¨é€”
        applyTime: row.applyTime, // é¢†ç”¨æ—¶é—´
        applyQty: row.applyQty, // é¢†ç”¨æ•°é‡
        applyUserId: row.applyUserId, // é¢†ç”¨äººID
        safeHazardId: row.safeHazardId, // å±é™©æºID
        applyUserName: row.applyUserName, // é¢†ç”¨äººå§“名
        code: row.code, // å±é™©æºç¼–码
        name: row.name, // å±é™©æºåç§°
        type: row.type, // å±é™©æºç±»åž‹
        location: row.location, // æ‰€åœ¨ä½ç½®
        riskLevel: row.riskLevel, // é£Žé™©ç­‰çº§
        type: row.type, // å±é™©æºç±»åž‹
        returnTime: dayjs().format("YYYY-MM-DD"), // å½’还时间
        returnUserName: "", // å½’还人姓名
        returnUserId: currentUserId.value, // å½’还人ID
        returnRemark: "", // å½’还情况说明
      });
    } else if (type === "view") {
      dialogTitle.value = "查看";
      form.value = { ...row };
    }
    dialogVisible.value = true;
  };

  // æŸ¥çœ‹å±é™©æºè¯¦æƒ…
  const viewKnowledge = row => {
    currentKnowledge.value = { ...row };
    viewDialogVisible.value = true;
  };

  // èŽ·å–类型标签类型
  const getTypeTagType = type => {
    const typeMap = {
      è¾ƒå¤§é£Žé™©: "warning",
      ä½Žé£Žé™©: "info",
      ä¸€èˆ¬é£Žé™©: "info",
      é‡å¤§é£Žé™©: "danger",
    };
    return typeMap[type] || "info";
  };

  // èŽ·å–类型标签文本
  const getTypeLabel = type => {
    return getKnowledgeTypeLabel(type);
  };

  // èŽ·å–效率标签类型
  const getEfficiencyTagType = efficiency => {
    const typeMap = {
      high: "success",
      medium: "warning",
      low: "info",
    };
    return typeMap[efficiency] || "info";
  };

  // èŽ·å–效率标签文本
  const getEfficiencyLabel = efficiency => {
    const efficiencyMap = {
      high: "显著提升",
      medium: "一般提升",
      low: "轻微提升",
    };
    return efficiencyMap[efficiency] || efficiency;
  };

  // èŽ·å–效率提升百分比
  const getEfficiencyScore = efficiency => {
    const scoreMap = {
      high: 40,
      medium: 25,
      low: 15,
    };
    return scoreMap[efficiency] || 0;
  };

  // èŽ·å–平均节省时间
  const getTimeSaved = efficiency => {
    const timeMap = {
      high: "2-3天",
      medium: "1-2天",
      low: "0.5-1天",
    };
    return timeMap[efficiency] || "未知";
  };

  // æäº¤å±é™©æºè¡¨å•
  const submitForm = async () => {
    try {
      if (dialogType.value === "add") {
        await formRef.value.validate();
        safeHazardRecordAdd({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("添加成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      } else {
        await formRef1.value.validate();
        safeHazardRecordUpdate({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("更新成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      }
    } catch (error) {
      console.error("表单验证失败:", error);
    }
  };

  // åˆ é™¤å±é™©æºè®°å½•
  const handleDelete = () => {
    if (selectedIds.value.length === 0) {
      ElMessage.warning("请选择要删除的记录");
      return;
    }

    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // console.log(selectedIds.value);
        safeHazardRecordDel(selectedIds.value).then(res => {
          if (res.code == 200) {
            ElMessage.success("删除成功");
            selectedIds.value = [];
            getList();
          }
        });
      })
      .catch(() => {
        // ç”¨æˆ·å–消
      });
  };

  // å¯¼å‡º
  const { proxy } = getCurrentInstance();
  const { hazard_source_type } = proxy.useDict("hazard_source_type");

  // å­—典工具
  const knowledgeTypeOptions = computed(() => hazard_source_type?.value || []);
  const getKnowledgeTypeLabel = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item ? item.label : val;
  };
  const getKnowledgeTypeTagType = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item?.elTagType || "info";
  };
  const handleExport = () => {
    proxy.download(
      "/knowledgeBase/export",
      { ...searchForm.value },
      "知识库.xlsx"
    );
  };
</script>

<style scoped>
  .auto-refresh-info {
    margin-bottom: 15px;
  }

  .auto-refresh-info .el-alert {
    border-radius: 8px;
  }

  .dialog-footer {
    text-align: right;
  }

  .knowledge-detail {
    padding: 20px 0;
  }

  .detail-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }

  .detail-section {
    margin-top: 24px;
  }

  .detail-section h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    border-left: 4px solid #409eff;
    padding-left: 12px;
  }

  .detail-content {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
    line-height: 1.6;
    color: #606266;
    white-space: pre-wrap;
  }

  .key-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .usage-stats {
    margin-top: 16px;
  }

  .stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 8px;
  }

  .stat-label {
    font-size: 14px;
    color: #909399;
  }

  :deep(.danger-row td) {
    color: #e95a66 !important;
  }
</style>