src/views/dashboard/eamIndex/EamManagerSignage.vue

@@ -81,26 +81,18 @@
          {
            planTime: '本月计划',
            planValueLabel: 'thisMonthMaintenancePlanNum',
            backgroundColor: '#719D8E',
            code: 'bysbzs'
          },
          {
            planTime: '本月完成',
            planValueLabel: 'thisMonthMaintenanceRealNum',
            backgroundColor: '#409EFF',
            code: 'bwc'
          },
          {
            planTime: '下月计划',
            planValueLabel: 'nextMonthMaintenancePlanNum',
            backgroundColor: '#A8985D',
            code: 'xysb'
          },
          {
            planTime: '超期',
            planValueLabel: 'maintenanceOverdueNum',
            backgroundColor: '#E86A6A',
            code: ''
          }
        ]
      }

 src/views/dashboard/mdcIndex/MdcManagerSignage.vue

@@ -1,37 +1,37 @@
<template>
  <div class="home-container">
    <div class="tab-nav">
      <div
        v-for="(tab, index) in tabList"
        :key="index"
        :class="['tab-item', activeTab === index ? 'tab-active' : '']"
        @click="handleTabChange(index)"
      >
    <a-card class="tab-nav">
      <div v-for="(tab, index) in tabList" :key="index"
           :class="['tab-item', activeTab === index ? 'tab-item-active' : '']"
           @click="handleTabChange(index)">
        {{ tab.label }}
      </div>
    </div>

    </a-card>

    <div class="chart-container">
      <div class="left-cards">
        <div class="card left-cards-card">
          <div id="running_state_chart" style="width:100%;height: 45%;max-height: 45vh"></div>
          <div id="efficiency_chart" style="width: 100%;height: 55%;max-height: 55vh"></div>
        </div>
      <div class="left-container">
        <a-card title="设备状态">
          <div id="running_state_chart" style="width:100%;height: 100%"></div>
        </a-card>

        <a-card :title="getLeftBottomChartTitle">
          <div id="efficiency_chart" style="width: 100%;height: 100%"></div>
        </a-card>
      </div>

      <div class="right-cards">
        <div class="card right-top-card">
          <div id="first15DaysEfficiency_chart" style="width:100%;height: 100%;max-height: 50vh"></div>
        </div>
      <div class="right-container">
        <a-card title="前15天利用率" class="right-top-container">
          <div id="first15DaysEfficiency_chart" style="width:100%;height: 100%;"></div>
        </a-card>

        <div class="right-bottom-card">
          <div class="card right-bottom-left-card">
            <div id="bar_chart" style="width:100%;height: 100%;max-height: 50vh"></div>
          </div>
          <div class="card right-bottom-right-card">
            <div id="double_bar_chart" style="width:100%;height: 100%;max-height: 50vh"></div>
          </div>
        <div class="right-bottom-container">
          <a-card :title="getRightBottomChartTitle">
            <div id="bar_chart" style="width:100%;height: 100%;"></div>
          </a-card>

          <a-card title="月利用率OEE统计">
            <div id="double_bar_chart" style="width:100%;height: 100%;"></div>
          </a-card>
        </div>
      </div>
    </div>
@@ -39,301 +39,255 @@
</template>

<script>
  import signageApi from '@/api/signage'
  import moment from 'moment'

import signageApi from '@/api/signage'
import moment from 'moment'

export default {
  name: 'DncManagerSignage',
  components: {},
  data() {
    return {
      tabList: [],
      activeTab: -1, // 初始无选中页签（-1表示未选择状态）
      firstEnterClientWidth: null,
      pieChartRadius: ['45%', '55%'],
      normalPieChartRadius: ['45%', '55%'],
      currentPageProductionId: null,
      runningStateChart: '',
      efficiencyChart: '',
      efficiencyData: [],
      barChart: '',
      barChartData: [],
      doubleBarChart: '',
      doubleBarChartData: {},
      runningStateChartDataRequireFinished: false,
      first15DaysEfficiencyChart: '',
      first15DaysEfficiencyData: {
        dataList: [],
        dateList: []
  export default {
    name: 'DncManagerSignage',
    components: {},
    data() {
      return {
        tabList: [],
        activeTab: -1, // 初始无选中页签（-1表示未选择状态）
        runningStateChart: '',
        efficiencyChart: '',
        efficiencyData: [],
        barChart: '',
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        first15DaysEfficiencyChart: '',
        first15DaysEfficiencyData: {
          dataList: [],
          dateList: []
        },
        runningStateData: [
          { value: '0', name: '关机' },
          { value: '0', name: '报警' },
          { value: '0', name: '待机' },
          { value: '0', name: '运行' }
        ]
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.getAllWorkShop()
      this.getChartDataByApi()
    },
    beforeDestroy() {
      // 组件销毁前移除监听
      window.removeEventListener('resize', this.handleWindowResize)
    },
    computed: {
      getLeftBottomChartTitle() {
        return `${moment().subtract(1, 'days').format('M月D日')}各车间利用率排行`
      },
      runningStateData: [
        { value: '0', name: '关机' },
        { value: '0', name: '报警' },
        { value: '0', name: '待机' },
        { value: '0', name: '运行' }
      ]
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    // this.re_drawPieChart()
    this.getAllWorkShop()
    this.getChartDataByApi()
  },
  beforeDestroy() {
    // 组件销毁前移除监听
    window.removeEventListener('resize', this.handleWindowResize)
    this.destroyEchartsInstances()
  },
  methods: {

    getAllWorkShop() {
      this.tabList = []
      signageApi.getAllWorkShop()
        .then(res => {
          if (res.success) {
            this.tabList = res.result.map(workshop => ({
              label: workshop.productionName,
              factoryId: workshop.id
            }))

            if (this.tabList.length > 0) {
              this.activeTab = -1
              this.destroyEchartsInstances()
              this.getChartDataByApi()
      getRightBottomChartTitle() {
        return moment().subtract(1, 'month').format('M月') + `OEE`
      }
    },
    methods: {
      // 获取车间列表
      getAllWorkShop() {
        this.tabList = []
        signageApi.getAllWorkShop()
          .then(res => {
            if (res.success) {
              this.tabList = res.result.map(workshop => ({
                label: workshop.productionName,
                factoryId: workshop.id
              }))
            }
          } else {
            this.tabList = []
            this.activeTab = -1
          }
        })
        .catch(err => {
          this.tabList = []
          this.activeTab = -1
          this.destroyEchartsInstances()
          })
      },

      handleTabChange(index) {
        // 1. 如果点击的是“已选中的页签”，执行“取消选中”逻辑
        if (this.activeTab === index) {
          this.activeTab = -1 // 重置为未选中状态
          this.getChartDataByApi()
        })
    },

    destroyEchartsInstances() {
      const charts = [
        this.runningStateChart,
        this.efficiencyChart,
        this.first15DaysEfficiencyChart,
        this.barChart,
        this.doubleBarChart
      ]
      charts.forEach(chart => {
        if (chart && chart.dispose) chart.dispose()
      })
    },

    handleTabChange(index) {
      // 1. 如果点击的是“已选中的页签”，执行“取消选中”逻辑
      if (this.activeTab === index) {
        this.activeTab = -1; // 重置为未选中状态
        this.destroyEchartsInstances(); // 销毁所有图表实例
        this.getChartDataByApi();
        return;
      }

      // 2. 常规切换页签逻辑（原有逻辑保留）
      this.activeTab = index;
      this.destroyEchartsInstances();
      this.getChartDataByApi();
    },

    /* 调用接口获取图表数据汇总方法 */
    getChartDataByApi() {
      let currentFactoryId = ''
      if (this.tabList[this.activeTab] != null && this.tabList[this.activeTab] !== undefined) {
        currentFactoryId = this.tabList[this.activeTab].factoryId
      }
      console.log('currentFactoryId', currentFactoryId)
      this.getRunningStateDataByApi(currentFactoryId)
      this.getEfficiencyDataByApi(currentFactoryId)
      this.getFirst15DaysEfficiencyDataByApi(currentFactoryId)
      this.getBarChartDataByApi(currentFactoryId)
      this.getDoubleBarChartDataByApi(currentFactoryId)
    },

    /* 调用接口获取设备运行状态 */
    getRunningStateDataByApi(productionCode) {
      this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
      this.runningStateChart.showLoading({
        text: '数据加载中 ...',
        color: '#0696e1', // 加载动画颜色
        textColor: '#fff',
        maskColor: 'transparent' // 遮罩层
      })
      signageApi.getEquipmentStatusStatisticsApi(productionCode)
        .then(res => {
          if (res.success) {
            this.runningStateData = res.result.list
            this.currentPageProductionId = res.result.productionId
            this.runningStateChartDataRequireFinished = true
            this.drawRunningStateChart(res.result.productionId)
          }
        })
    },

    /* 调用接口获取设备利用率 */
    getEfficiencyDataByApi(productionCode) {
      this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
      this.efficiencyChart.showLoading({
        text: '数据加载中 ...',
        color: '#0696e1', // 加载动画颜色
        textColor: '#fff'
      })
      signageApi.getEquipmentUtilizationStatisticsApi(productionCode)
        .then(res => {
          if (res.success) {
            this.efficiencyData = res.result
            this.drawEfficiencyChart()
          }
        })
    },

    /* 调用接口获取前15天利用率 */
    getFirst15DaysEfficiencyDataByApi(productionCode) {
      this.first15DaysEfficiencyChart = this.$echarts.init(document.getElementById('first15DaysEfficiency_chart'))
      this.first15DaysEfficiencyChart.showLoading({
        text: '数据加载中 ...',
        color: '#0696e1', // 加载动画颜色
        textColor: '#000000',
        maskColor: 'transparent' // 遮罩层
      })
      signageApi.getEquipmentDayUtilizationStatisticsApi(productionCode)
        .then(res => {
          if (res.success) {
            this.first15DaysEfficiencyData = res.result
            this.drawFirst15DaysEfficiencyDataChart()
          }
        })
    },
    /* 绘制前7天利用率柱图 */
    drawFirst15DaysEfficiencyDataChart() {
      this.first15DaysEfficiencyData.dateList.forEach(item => {
        if (!this.first15DaysEfficiencyData.dataList.map(item => item.date).includes(item)) {
          const dateObj = {
            date: item.date,
            openRate: 0,
            startRate: 0,
            utilizationRate: 0
          }
          this.first15DaysEfficiencyData.dataList.push(dateObj)
          return
        }
      })
      const dateList = this.first15DaysEfficiencyData.dataList.map(item => item.date)
      const newData = {
        xAxis: dateList,
        yAxis: [
          {
            name: '利用率',
            value: this.first15DaysEfficiencyData.dataList.map(item => item.utilizationRate)
          },
          {
            name: '开动率',
            value: this.first15DaysEfficiencyData.dataList.map(item => item.startRate)
          },
          {
            name: '开机率',
            value: this.first15DaysEfficiencyData.dataList.map(item => item.openRate)

        // 2. 常规切换页签逻辑（原有逻辑保留）
        this.activeTab = index
        this.getChartDataByApi()
      },

      /* 调用接口获取图表数据汇总方法 */
      getChartDataByApi() {
        this.destroyChartsInstances()
        let currentFactoryId = ''
        if (this.activeTab !== -1) currentFactoryId = this.tabList[this.activeTab].factoryId
        this.getRunningStateDataByApi(currentFactoryId)
        this.getEfficiencyDataByApi(currentFactoryId)
        this.getFirst15DaysEfficiencyDataByApi(currentFactoryId)
        this.getBarChartDataByApi(currentFactoryId)
        this.getDoubleBarChartDataByApi(currentFactoryId)
      },

      destroyChartsInstances() {
        const charts = [
          this.runningStateChart,
          this.efficiencyChart,
          this.first15DaysEfficiencyChart,
          this.barChart,
          this.doubleBarChart
        ]
        charts.forEach(chart => {
          if (chart && chart.dispose) chart.dispose()
        })
      },

      /* 调用接口获取设备运行状态 */
      getRunningStateDataByApi(productionCode) {
        this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
        this.runningStateChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#000'
        })
        signageApi.getEquipmentStatusStatisticsApi(productionCode)
          .then(res => {
            if (res.success) {
              this.runningStateData = res.result.list
              this.drawRunningStateChart(res.result.productionId)
            }
          })
      },

      /* 调用接口获取设备利用率 */
      getEfficiencyDataByApi(productionCode) {
        this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
        this.efficiencyChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#000'
        })
        signageApi.getEquipmentUtilizationStatisticsApi(productionCode)
          .then(res => {
            if (res.success) {
              this.efficiencyData = res.result
              this.drawEfficiencyChart()
            }
          })
      },

      /* 调用接口获取前15天利用率 */
      getFirst15DaysEfficiencyDataByApi(productionCode) {
        this.first15DaysEfficiencyChart = this.$echarts.init(document.getElementById('first15DaysEfficiency_chart'))
        this.first15DaysEfficiencyChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#000000'
        })
        signageApi.getEquipmentDayUtilizationStatisticsApi(productionCode)
          .then(res => {
            if (res.success) {
              this.first15DaysEfficiencyData = res.result
              this.drawFirst15DaysEfficiencyDataChart()
            }
          })
      },

      /* 绘制前15天利用率柱图 */
      drawFirst15DaysEfficiencyDataChart() {
        this.first15DaysEfficiencyData.dateList.forEach(item => {
          if (!this.first15DaysEfficiencyData.dataList.map(item => item.date).includes(item)) {
            const dateObj = {
              date: item.date,
              openRate: 0,
              startRate: 0,
              utilizationRate: 0
            }
            this.first15DaysEfficiencyData.dataList.push(dateObj)
          }
        ],
        yAxisName: '前15天利用率(%)'
      }
      let legendData = []
      let seriesData = []
      let colorArr = ['#A7F0C1', '#FAE893', '#66DFE2']
      legendData = newData.yAxis.map((item) => item.name)
      seriesData = newData.yAxis.map((item1, index1) => {
        return {
          name: item1.name,
          type: 'bar',
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: colorArr[index1],
            barBorderRadius: 100
          },
          lineStyle: {
            width: 2
          },
          markPoint: {
            show: true
          },
          yAxisIndex: 1,
          data: item1.value // 折线图的数据
        })
        const dateList = this.first15DaysEfficiencyData.dataList.map(item => item.date)
        const newData = {
          xAxis: dateList,
          yAxis: [
            {
              name: '利用率',
              value: this.first15DaysEfficiencyData.dataList.map(item => item.utilizationRate)
            },
            {
              name: '开动率',
              value: this.first15DaysEfficiencyData.dataList.map(item => item.startRate)
            },
            {
              name: '开机率',
              value: this.first15DaysEfficiencyData.dataList.map(item => item.openRate)
            }
          ]
        }
      })
      const option = {
        grid: {
          containLabel: true,
          bottom: '1%',
          top: '20%',
          left: '2%',
          right: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let result = ''
            params.forEach((item, index) => {
              let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}：${item.value}%`
              if (index === 0) {
                result = `<span style="font-weight:bolder;">${item.name}</span>`
              }
              result += '<br />' + dom
            })
            return result
          }
        },
        legend: {
          top: 20,
          right: 'center',
          data: legendData,
          itemGap: 10,
          textStyle: {
            fontSize: 14,
            color: '#000000'
          }
        },
        xAxis: {
          data: newData.xAxis || [],
          axisLabel: {
            interval: 0,
            show: true,
            fontSize: 14,
            color: '#000000'
            // rotate: -30,
          },
          axisLine: {
            show: true,
        let legendData = []
        let seriesData = []
        let colorArr = ['#A7F0C1', '#FAE893', '#66DFE2']
        legendData = newData.yAxis.map((item) => item.name)
        seriesData = newData.yAxis.map((item1, index1) => {
          return {
            name: item1.name,
            type: 'bar',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: colorArr[index1],
              borderRadius: 100
            },
            lineStyle: {
              width: 2
            },
            markPoint: {
              show: true
            },
            yAxisIndex: 1,
            data: item1.value // 折线图的数据
          }
        })
        const option = {
          grid: {
            containLabel: true,
            bottom: '1%',
            top: '10%',
            left: '1%',
            right: '1%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              let result = ''
              params.forEach((item, index) => {
                let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}：${item.value}%`
                if (index === 0) {
                  result = `<span style="font-weight:bolder;">${item.name}</span>`
                }
                result += '<br />' + dom
              })
              return result
            }
          },
          legend: {
            right: 'center',
            data: legendData,
            itemGap: 10,
            textStyle: {
              fontSize: 14,
              color: '#000000'
            }
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          }
        },
        yAxis: [
          {
            name: newData.yAxisName,
            nameTextStyle: {
              color: '#1AD8DE',
              fontSize: 18,
              padding: [0, 0, 0, 110]
          xAxis: {
            data: newData.xAxis || [],
            axisLabel: {
              interval: 0,
              show: true,
              fontSize: 14,
              color: '#000000'
              // rotate: -30,
            },
            nameGap: 30,
            type: 'value',
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
@@ -341,543 +295,425 @@
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#000000'
              }
              show: true,
              alignWithLabel: true
            }
          },
          {
          yAxis: [
            {
              name: newData.yAxisName,
              nameTextStyle: {
                color: '#1AD8DE',
                fontSize: 18,
                padding: [0, 0, 0, 110]
              },
              nameGap: 30,
              type: 'value',
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#000000'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#000000'
                }
              }
            },
            {
              type: 'value',
              position: 'right',
              splitNumber: 5,
              max: 100,
              axisLabel: {
                show: true,
                color: '#000000',
                fontSize: 14
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#000000'
                }
              },
              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#000000'
                }
              }
            }
          ],
          series: seriesData,
          dataZoom: {
            show: false,
            startValue: 0, // 从头开始。
            endValue: 14 // 一次性展示几个
          }
        }
        this.first15DaysEfficiencyChart.setOption(option, true)
        this.first15DaysEfficiencyChart.hideLoading()
      },

      /* 调用接口获取设备OEE统计 */
      getBarChartDataByApi(productionCode) {
        this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
        this.barChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#000'
        })
        signageApi.getEquipmentOEEStatistics(productionCode)
          .then(res => {
            if (res.success && res.result) {
              this.barChartData = res.result
              this.drawBarChart()
            }
          })
      },

      /* 调用接口获取设备OEE和利用率对比 */
      getDoubleBarChartDataByApi(productionCode) {
        this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
        this.doubleBarChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: '#000000',
          maskColor: 'transparent' // 遮罩层
        })
        signageApi.getEquipmentMonthStatisticsApi(productionCode)
          .then(res => {
            if (res.success) {
              this.doubleBarChartData = res.result
              this.drawDoubleBarChart()
            }
          })
      },

      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart() {
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
                '<span style="display:inline-block; width:10%; height:10%; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}（${params.percent}%）`
            }
          },
          legend: {
            left: 'center',
            bottom: 0, // 底部距离
            orient: 'horizontal', // 水平排列
            itemWidth: 14,
            itemHeight: 14,
            icon: 'roundRect',
            itemGap: 15,
            textStyle: {
              color: '#000',
              fontSize: 14
            },
            data: ['关机', '报警', '待机', '运行']
          },
          series: [
            {
              type: 'pie',
              roseType: 'angle', // 玫瑰图
              radius: ['40%', '55%'],
              center: ['50%', '40%'],
              color: [
                '#8B8B8B',
                '#F56436',
                '#FFFF40',
                '#0FC61A'
              ],
              label: {
                position: 'outside',
                show: true,
                color: '#000',
                fontSize: 16,
                formatter: function(params) {
                  if (params.name !== '') {
                    return `${params.name}:${params.value}`
                  }
                }
              },
              labelLine: {
                show: true,
                length2: 10,
                length: 10,
                lineStyle: {
                  color: '#000'
                }
              },
              data: this.runningStateData
            }
          ]
        }
        this.runningStateChart.setOption(option, true)
        this.runningStateChart.hideLoading()
      },

      /* 绘制设备利用率胶囊图 */
      drawEfficiencyChart() {
        const data = this.efficiencyData || []
        const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0']
        const dataMax = data.length > 0 ? +data.sort((x, y) => +y.value - +x.value)[0].value : 0
        let yAxisMax = dataMax === 0 ? 1 : Math.ceil(dataMax / 5) * 5
        const yAxisInterval = yAxisMax / 5
        const option = {
          grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            top: '1%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'none' },
            formatter: function(params) {
              console.log('params', params)
              return `<span style="font-weight:bolder;">${params[0].name}</span><br/>
                <span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:${params[0].color}"></span>
                ${params[0].seriesName} : ${params[0].value}%`
            }
          },
          xAxis: {
            name: '',
            nameTextStyle: { color: '#000000' },
            axisLabel: {
              margin: 20,
              color: '#000000'
            },
            show: true,
            min: 0,
            max: dataMax,
            interval: yAxisInterval,
            type: 'value',
            position: 'right',
            splitNumber: 5,
            max: 100,
            axisTick: { show: false },
            splitLine: { show: false }
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            triggerEvent: true,
            axisLabel: {
              show: true,
              color: '#000000',
              fontSize: 14
              fontSize: '14',
              fontWeight: 'bolder',
              formatter: function(value) {
                return `${data.find(item => item.productionCode === value).name}`
              }
            },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
            data: data.map(item => item.productionCode)
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              color: '#000000',
              fontSize: '14',
              formatter: '{value}%'
            },
            data: data
          }],
          series: {
            name: '利用率',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              borderRadius: 100,
              color: function(params) {
                return colorArray[params.dataIndex % colorArray.length]
              }
            },
            barWidth: 12,
            data: data
          }
        }

        this.efficiencyChart.setOption(option, true)
        this.efficiencyChart.hideLoading()
      },

      /* 绘制单柱图 */
      drawBarChart() {
        const defaultData = []
        const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0']
        const dataMax = this.barChartData.length > 0 ? +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value : 0
        let yAxisMax
        if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0，则将背景默认值设置为1
        else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值，思路为数据最大值最接近的能被5整除的数字
        const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份
        this.barChartData.forEach(item => defaultData.push(yAxisMax))
        const option = {
          grid: {
            left: '1%',
            right: '1%',
            bottom: '3%',
            top: '5%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%'
            },
            // backgroundColor: 'rgba(9, 24, 48, 0.5)',
            borderColor: 'rgba(75, 253, 238, 0.4)',
            borderWidth: 1
          },
          xAxis: {
            name: '',
            nameLocation: 'middle',
            nameGap: 40, // x轴name与横坐标轴线的间距
            type: 'category',
            data: this.barChartData.map(item => item.productionId),
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000000'
              }
            },
            axisLabel: {
              show: true, // 是否显示刻度标签，默认显示
              interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: this.barChartData.length >= 6 ? -30 : 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // 刻度标签是否朝内，默认朝外
              margin: 10, // 刻度标签与轴线之间的距离
              formatter: value => {
                return `${this.barChartData.find(item => item.productionId === value).name}`
              },
              fontSize: 14
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            name: '%',
            min: 0,
            max: yAxisMax,
            interval: yAxisInterval,
            axisLabel: {
              formatter: '{value}',
              color: '#000000',
              fontSize: 14
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true
            },
            splitLine: {
              show: false
            }
          },
          series: {
            type: 'bar',
            data: this.barChartData,
            barWidth: this.barChartData.length > 5 ? '40%' : 30,
            itemStyle: {
              color: function(params) {
                let num = colorArray.length
                return colorArray[params.dataIndex % num]
              },
              borderRadius: 100
            },
            zlevel: 1,
            label: {
              show: false,
              lineStyle: {
                color: '#000000'
              }
            }
          }
        ],
        series: seriesData,
        dataZoom: {
          show: false,
          startValue: 0, // 从头开始。
          endValue: 14 // 一次性展示几个
        }
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true, name: '前7天利用率统计图', pixelRatio: 1 }
        //   }
        // }
      }
      this.first15DaysEfficiencyChart.setOption(option, true)
      this.first15DaysEfficiencyChart.hideLoading()
      this.first15DaysEfficiencyChart.on('click', params => {
        this.$router.push({
          name: 'mdc-base-StatisticsChart',
          params: {
            isEquipment: true,
            productionId: params.name,
            tierName: this.first15DaysEfficiencyData.dataList.find(item => item.date === params.name).date
          }
        })
      })
    },


    /* 调用接口获取设备OEE统计 */
    getBarChartDataByApi(productionCode) {
      this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
      this.barChart.showLoading({
        text: '数据加载中 ...',
        color: '#0696e1', // 加载动画颜色
        textColor: '#fff'
      })
      signageApi.getEquipmentOEEStatistics(productionCode)
        .then(res => {
          if (res.success && res.result) {
            this.barChartData = res.result
            this.drawBarChart()
          }
        })
        .finally(() => {
          this.barChart.hideLoading()
        })
    },

    /* 绘制单柱图 */
    drawBarChart() {
      const defaultData = []
      const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0']
      const dataMax = this.barChartData.length > 0 ? +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value : 0
      let yAxisMax
      if (dataMax === 0) yAxisMax = 1 // 若数据中最大值为0，则将背景默认值设置为1
      else yAxisMax = Math.ceil(dataMax / 5) * 5 // 设置柱图背景阴影默认值，思路为数据最大值最接近的能被5整除的数字
      const yAxisInterval = yAxisMax / 5 // 同时将刻度值分成5份
      this.barChartData.forEach(item => defaultData.push(yAxisMax))
      const option = {
        title: {
          show: true, // 是否显示标题，默认为true
          text: '', // 主标题文本
          x: 'left', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
          y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
          textStyle: {
            // 主标题文本样式
            fontSize: 18,
            fontWeight: 'normal',
            color: '#1AD8DE'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
              '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%'
          },
          // backgroundColor: 'rgba(9, 24, 48, 0.5)',
          borderColor: 'rgba(75, 253, 238, 0.4)',
          textStyle: {
            // color: '#CFE3FC'
          },
          borderWidth: 1
        },
        grid: {
          top: '20%',
          left: '10%'
        },
        xAxis: [{
          name: '',
          nameLocation: 'middle',
          nameGap: 40, // x轴name与横坐标轴线的间距
          type: 'category',
          data: this.barChartData.map(item => item.productionId),
          axisLine: {
            lineStyle: {
              color: '#000000'
            }
          },
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: this.barChartData.length >= 6 ? -30 : 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 10, // 刻度标签与轴线之间的距离
            formatter: value => {
              return `${this.barChartData.find(item => item.productionId === value).name}`
            },
            fontSize: 14
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          }
        }],
        yAxis: [{
          name: '%',
          min: 0,
          max: yAxisMax,
          interval: yAxisInterval,
          axisLabel: {
            formatter: '{value}',
            color: '#000000',
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#000000'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          }
        }],
        series: [{
          type: 'bar',
          data: this.barChartData,
          barWidth: this.barChartData.length > 5 ? '40%' : 30,
          itemStyle: {
            color: function(params) {
              let num = colorArray.length
              return colorArray[params.dataIndex % num]
            },
            barBorderRadius: 100
          },
          zlevel: 1,
          label: {
            show: false,
            lineHeight: 10,
            formatter: params => {
              if (+params.value === 0) return ''
              else return params.value
            },
            position: 'top',
            textStyle: {
              lineHeight: 10,
              formatter: params => {
                if (+params.value === 0) return ''
                else return params.value
              },
              position: 'top',
              color: '#000000',
              fontSize: 16
            }
          }
        }]
      }
      option.title.text = moment().subtract(1, 'month').format('M月') + `OEE`
      this.barChart.setOption(option, true)
    },

    /* 绘制设备运行状态玫瑰饼图 */
    drawRunningStateChart() {
      const option = {
        height: 300,
        title: {
          show: true, // 是否显示标题，默认为true
          text: '设备状态', // 主标题文本
          x: 'left', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
          y: 'top', // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
          textStyle: {
            // 主标题文本样式
            fontSize: 18,
            fontWeight: 'normal',
            color: '#1AD8DE'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
              '<span style="display:inline-block; width:10%; height:10%; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + `${params.value}（${params.percent}%）`
          }
        },
        legend: {
          top: 'auto',
          left: 'center',
          bottom: '10%', // 底部距离
          orient: 'horizontal', // 水平排列
          right: '10%',
          // bottom: "0",
          itemWidth: 14,
          itemHeight: 14,
          icon: 'roundRect',
          itemGap: 15,
          textStyle: {
            color: '#000',
            fontSize: 14,
            padding: [0, 0, 0, 0]
          },
          data: ['关机', '报警', '待机', '运行']
        },
        grid: {
          containLabel: true
        },
        series: [
          {
            type: 'pie',
            roseType: 'angle', // 玫瑰图
            // selectedMode: "single",
            radius: this.pieChartRadius,
            center: ['45%', '55%'],
            color: [
              '#8B8B8B',
              '#F56436',
              '#FFFF40',
              '#0FC61A'
            ],
            label: {
              position: 'outside',
              show: true,
              color: '#000',
              // textBorderColor: 'inherit',
              // textBorderWidth: 1,
              fontSize: 16,
              formatter: function(params) {
                if (params.name !== '') {
                  return `${params.name}:${params.value}`
                }
              }
            },
            labelLine: {
              show: true,
              length2: 10,
              length: 10
            },
            data: this.runningStateData
          }
        ]
      }
      this.runningStateChart.setOption(option, true)
      this.runningStateChart.hideLoading()
    },

    /* 绘制设备利用率胶囊图 */
    drawEfficiencyChart() {
      const data = this.efficiencyData || []

      // 无论数据是否为空，先取消loading状态
      this.efficiencyChart.hideLoading()

      // 标题文本统一处理
      const titleText = `${moment().subtract(1, 'days').format('M月D日')}各车间利用率排行`

      if (data.length === 0) {
        // 数据为空时只展示标题
        const option = {
          title: {
            show: true,
            text: titleText,
            x: 'left',
            y: 'top',
            textStyle: {
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1AD8DE'
            }
          },
          // 隐藏所有轴和网格
          xAxis: { show: false },
          yAxis: [{ show: false }, { show: false }],
          grid: { show: false },
          series: []
        }
        this.efficiencyChart.setOption(option, true)
        return
      }
        this.barChart.setOption(option, true)
        this.barChart.hideLoading()
      },

      // 数据不为空时的正常处理逻辑（保持不变）
      const colorArray = [
        { top: '#79CEAA', bottom: '#79CEAA' },
        { top: '#F589A2', bottom: '#F589A2' },
        { top: '#6FBF9D', bottom: '#6FBF9D' },
        { top: '#66DFE2', bottom: '#66DFE2' },
        { top: '#A7F0C1', bottom: '#A7F0C1' },
        { top: '#FAE893', bottom: '#FAE893' },
        { top: '#F7B7A0', bottom: '#F7B7A0' }
      ]

      const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
      let yAxisMax = dataMax === 0 ? 1 : Math.ceil(dataMax / 5) * 5
      const yAxisInterval = yAxisMax / 5

      const option = {
        title: {
          show: true,
          text: titleText,
          x: 'left',
          y: 'top',
          textStyle: {
            fontSize: 18,
            fontWeight: 'normal',
            color: '#1AD8DE'
          }
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '0%',
          top: '6%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'none' },
          formatter: function(params) {
            return `<span style="font-weight:bolder;">${params[0].name}</span><br/>
                <span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:${params[0].color.colorStops[params[0].dataIndex].color}"></span>
                ${params[0].seriesName} : ${params[0].value}%`
          }
        },
        xAxis: {
          name: '',
          nameTextStyle: { color: '#000000' },
          axisLabel: {
            margin: 20,
            textStyle: { color: '#000000' }
          },
          show: true,
          min: 0,
          max: 'dataMax',
          interval: yAxisInterval,
          type: 'value',
          axisTick: { show: false },
          splitLine: { show: false }
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          triggerEvent: true,
          axisLabel: {
            show: true,
            textStyle: { color: '#000000', fontSize: '14', fontWeight: 'bolder' },
            formatter: function(value) {
              return `${data.find(item => item.productionCode === value).name}`
      /* 绘制双柱图 */
      drawDoubleBarChart() {
        const option = {
          color: ['#66DFE2', '#79CEAA'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              let result = ''
              params.forEach((item, index) => {
                let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}：${item.value}%`
                if (index === 0) {
                  result = `<span style="font-weight:bolder;">${item.name}</span>`
                }
                result += '<br />' + dom
              })
              return result
            }
          },
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          data: data.map(item => item.productionCode)
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: { color: '#000000', fontSize: '14' },
            formatter: '{value}%'
          grid: {
            left: '1%',
            right: '1%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          data: data
        }],
        series: [{
          name: '利用率',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            barBorderRadius: 100,
            color: function(params) {
              const num = colorArray.length
              return {
                type: 'linear',
                colorStops: [{
                  offset: 0,
                  color: colorArray[params.dataIndex % num].bottom
                }, {
                  offset: 1,
                  color: colorArray[params.dataIndex % num].top
                }]
          legend: {
            icon: 'roundRect',
            left: 'center',
            itemWidth: 14,
            itemHeight: 14,
            textStyle: {
              fontSize: 14,
              color: '#000'
            },
            data: ['OEE', 'TEEP']
          },
          xAxis: {
            type: 'category',
            data: this.doubleBarChartData.dateList,
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0)'
              }
            },
            axisLabel: {
              fontSize: 14,
              color: '#000000'
            },
            axisTick: {
              show: true
            }
          },
          barWidth: 12,
          data: data
        }]
      }

      this.efficiencyChart.setOption(option, true)
    },

    re_drawPieChart() {
      const clientWidth = document.body.clientWidth || document.documentElement.clientWidth
      if (this.firstEnterClientWidth != 1920) {
        this.pieChartRadius = this.normalPieChartRadius.map(item => item = (+item.slice(0, -1) * (clientWidth / 1920)) + '%')
      } else {
        this.pieChartRadius = this.normalPieChartRadius.map(item => item = (+item.slice(0, -1) * (clientWidth / this.firstEnterClientWidth)) + '%')
      }
      console.log('pieChartRadius', this.pieChartRadius)
    },


    /* 调用接口获取设备OEE和利用率对比 */
    getDoubleBarChartDataByApi(productionCode) {
      this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
      this.doubleBarChart.showLoading({
        text: '数据加载中 ...',
        color: '#0696e1', // 加载动画颜色
        textColor: '#000000',
        maskColor: 'transparent' // 遮罩层
      })
      signageApi.getEquipmentMonthStatisticsApi(productionCode)
        .then(res => {
          if (res.success) {
            this.doubleBarChartData = res.result
            this.drawDoubleBarChart()
          }
        })
    },
    /* 绘制双柱图 */
    drawDoubleBarChart() {
      const option = {
        title: {
          text: '月利用率OEE统计',
          left: 'left',
          top: 'top',
          textStyle: {
            fontSize: 18,
            fontWeight: 'normal',
            color: '#1AD8DE'
          }
        },
        color: ['#66DFE2', '#79CEAA'],
        tooltip: {
          confine: true,
          formatter: function(params) {
            return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' +
              '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + params.seriesName + ' : ' + params.value + '%'
          }
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '10%',
          top: '20%',
          containLabel: true
        },
        legend: {
          icon: 'roundRect',
          orient: 'horizontal',
          left: 'center',
          itemWidth: 14,
          itemHeight: 14,
          formatter: ['{a|{name}}'].join('\n'),
          textStyle: {
            fontSize: 14,
            color: '#000000',
            height: 8,
            rich: {
              a: {
                verticalAlign: 'bottom'
              }
            }
          },
          data: ['OEE', 'TEEP']
        },
        xAxis: {
          type: 'category',
          data: this.doubleBarChartData.dateList,
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0)'
            }
          },
          axisLabel: {
            fontSize: 14,
            color: '#000000'
          },
          axisTick: {
            show: true
          }
        },
        yAxis: [
          {
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: '#000000'
@@ -904,241 +740,140 @@
              fontFamily: 'Bebas'
            }
          },
          {
            type: 'value',
            axisLine: {
              show: true
          series: [
            {
              type: 'bar',
              barWidth: 15,
              itemStyle: { borderRadius: 100 },
              name: 'OEE',
              data: this.doubleBarChartData.oeeList,
              label: {
                show: false
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              fontSize: 14,
              formatter: '{value}%', // 右侧Y轴文字显示
              fontFamily: 'Bebas',
              color: '#6A93B9'
            },
            splitArea: {
              show: false
            {
              type: 'bar',
              barWidth: 15,
              itemStyle: { borderRadius: 100 },
              name: 'TEEP',
              data: this.doubleBarChartData.utilizationList,
              label: {
                show: false
              }
            }
          }],
        series: [{
          type: 'bar',
          barWidth: 15,
          itemStyle: { barBorderRadius: 100 },
          name: 'OEE',
          data: this.doubleBarChartData.oeeList,
          label: {
            show: false,
            lineHeight: 10,
            formatter: params => {
              if (+params.value === 0) return ''
              else return params.value
            },
            position: 'inside',
            textStyle: {
              color: '#000000',
              fontSize: 12
            }
          ]
        }
        this.doubleBarChart.setOption(option, true)
        this.doubleBarChart.hideLoading()
      },

      /**
       * 窗口尺寸变化时触发
       * 调整图表尺寸以适应分辨率
       */
      handleWindowResize() {
        if (this.runningStateChart) this.runningStateChart.resize()
        if (this.efficiencyChart) this.efficiencyChart.resize()
        if (this.first15DaysEfficiencyChart) this.first15DaysEfficiencyChart.resize()
        if (this.barChart) this.barChart.resize()
        if (this.doubleBarChart) this.doubleBarChart.resize()
      }
    }
  }
</script>

<style scoped lang="less">
  @container-margin: 10px;

  /* 主容器样式 */
  .home-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    gap: @container-margin;

    /* 车间导航列表 */
    .tab-nav {
      height: 60px;
      border-radius: 20px;

      /deep/ .ant-card-body {
        height: 100%;
        padding: 0 12px;
        display: flex;
        align-items: center;
      }

      .tab-item {
        padding: 8px 16px;
        font-size: 14px;
        color: #666666;
        border-radius: 20px;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.3s ease;
        margin-right: @container-margin;

        &:hover {
          background-color: #f0f5ff;
          color: #0696e1;
        }
      }

      .tab-item-active {
        background-color: #0696e1;
        color: #fff;
        font-weight: 500;
      }
    }

    /* 图表容器样式 */
    .chart-container {
      display: flex;
      gap: @container-margin;
      height: calc(100% - 60px - @container-margin);

      /deep/ .ant-card {
        display: flex;
        flex-direction: column;
        .ant-card-body {
          flex: 1;
        }
      }

      .left-container {
        width: 30%;
        /deep/ .ant-card {
          &:first-child {
            height: calc(45% - @container-margin / 2);
            margin-bottom: @container-margin;
          }
        }, {
          type: 'bar',
          barWidth: 15,
          itemStyle: { barBorderRadius: 100 },
          name: 'TEEP',
          data: this.doubleBarChartData.utilizationList,
          label: {
            show: false,
            lineHeight: 10,
            formatter: params => {
              if (+params.value === 0) return ''
              else return params.value
            },
            position: 'inside',
            textStyle: {
              color: '#000000',
              fontSize: 12
          &:last-child {
            height: calc(55% - @container-margin / 2);
          }
        }
      }

      .right-container {
        width: 70%;

        .right-top-container {
          margin-bottom: @container-margin;
          height: calc(50% - @container-margin / 2);
        }

        .right-bottom-container {
          height: calc(50% - @container-margin / 2);
          display: flex;

          > div {
            width: 50%;
            &:first-child {
              margin-right: @container-margin;
            }
          }
        }
        ]
      }
      this.doubleBarChart.setOption(option, true)
      this.doubleBarChart.hideLoading()
    },

    /**
     * 窗口尺寸变化时触发
     * 调整图表尺寸以适应分辨率
     */
    handleWindowResize() {
      // this.re_drawPieChart()
      if (this.runningStateChart) this.runningStateChart.resize()
      if (this.efficiencyChart) this.efficiencyChart.resize()
      if (this.first15DaysEfficiencyChart) this.first15DaysEfficiencyChart.resize()
      if (this.barChart) this.barChart.resize()
      if (this.doubleBarChart) this.doubleBarChart.resize()
    }
  }
}
</script>

<style scoped>
/* 页签导航样式 */
.tab-nav {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
  display: none;
}

.tab-item {
  padding: 8px 16px;
  font-size: 14px;
  color: #666666;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.tab-active {
  background-color: #0696e1;
  color: #ffffff;
  font-weight: 500;
}

.tab-item:hover {
  background-color: #f0f5ff;
  color: #0696e1;
}

/* 主容器样式 */
.home-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1px;
  box-sizing: border-box;
  gap: 16px;
  background-color: #f0f2f7;
}

/* 图表容器样式 */
.chart-container {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

/* 左侧卡片区域 */
.left-cards {
  flex: 1;
  min-width: 0;
}

/* 右侧卡片区域 */
.right-cards {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 通用卡片样式 */
.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: flex-start;
}

/* 左侧卡片 */
.left-cards-card {
  height: 100%;
  min-height: 100vh;
}

/* 右侧顶部卡片 */
.right-top-card {
  flex: 1;
  min-height: 50vh;
}

/* 右侧底部容器 */
.right-bottom-card {
  flex: 1;
  min-width: 0;
  min-height: 50vh;
  display: flex;
  gap: 16px;
}

/* 右侧底部左右卡片 */
.right-bottom-left-card,
.right-bottom-right-card {
  flex: 1;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .chart-container {
    gap: 12px;
  }

  .card {
    padding: 12px;
  }
}

@media (max-width: 992px) {
  .chart-container {
    flex-direction: column;
  }

  .left-cards, .right-cards {
    width: 100%;
  }

  .left-cards {
    margin-bottom: 16px;
  }

  .right-bottom-card {
    flex-direction: column;
  }

  .tab-item {
    padding: 6px 12px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .home-container {
    padding: 8px;
  }

  .tab-nav {
    padding: 8px;
    margin-bottom: 8px;
  }
}
</style>

 src/views/eam/equipment/EamEquipmentList.vue

@@ -102,12 +102,12 @@
              :md="8"
              :sm="24"
            >
            <a-form-item label="机床厂家">
              <a-input
                placeholder="请输入机床厂家"
                v-model="queryParam.manufacturingEnterprise"
              ></a-input>
            </a-form-item>
              <a-form-item label="机床厂家">
                <a-input
                  placeholder="请输入机床厂家"
                  v-model="queryParam.manufacturingEnterprise"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col
              :xl="6"
@@ -115,12 +115,12 @@
              :md="8"
              :sm="24"
            >
            <a-form-item label="原值(元)">
              <a-input
                placeholder="请输入原值(元)"
                v-model="queryParam.originalValue"
              ></a-input>
            </a-form-item>
              <a-form-item label="原值(元)">
                <a-input
                  placeholder="请输入原值(元)"
                  v-model="queryParam.originalValue"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col
              :xl="6"
@@ -128,12 +128,12 @@
              :md="8"
              :sm="24"
            >
            <a-form-item label="性能指标">
              <a-input
                placeholder="请输入性能指标"
                v-model="queryParam.performanceIndicators"
              ></a-input>
            </a-form-item>
              <a-form-item label="性能指标">
                <a-input
                  placeholder="请输入性能指标"
                  v-model="queryParam.performanceIndicators"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col
              :xl="6"
@@ -200,7 +200,7 @@
                style="margin-left: 8px"
              >
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
@@ -215,12 +215,14 @@
        @click="handleAdd"
        type="primary"
        icon="plus"
      >新增</a-button>
      >新增
      </a-button>
      <a-button
        type="primary"
        icon="download"
        @click="handleExportXls('设备台账')"
      >导出</a-button>
      >导出
      </a-button>
      <a-upload
        name="file"
        :showUploadList="false"
@@ -232,13 +234,15 @@
        <a-button
          type="primary"
          icon="import"
        >导入</a-button>
        >导入
        </a-button>
      </a-upload>
      <a-button
        type="primary"
        icon="download"
        @click="handleTemplateXlsDownload"
      >导入模板下载</a-button>
      >导入模板下载
      </a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <!--          <a-menu-item key="1" @click="handleOpenNameplateModal(selectionRows)">-->
@@ -250,12 +254,12 @@
            @click="batchDel"
            v-if="isShowAuth('eam:equipment:delete')"
          >
            <a-icon type="delete" />
            <a-icon type="delete"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down" />
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>
@@ -266,7 +270,8 @@
        class="ant-alert ant-alert-info"
        style="margin-bottom: 16px;"
      >
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项
        <a
          style="margin-left: 24px"
          @click="onSelectChange([])"
@@ -281,63 +286,42 @@
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: 'max-content' }"
        :scroll="{ x: 'max-content',y:465 }"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        :customRow="customTableRow"
      >
        <span
          slot="processParametersFlag"
          slot-scope="text"
        >
          <lx-switch
            v-model="text"
            disabled
            checked-children="有"
            un-checked-children="无"
          />

        <!--需要超出省略的字段-->
        <template slot="ellipsisText" slot-scope="text">
          <template v-if="(text&&text.length<=6)||!text">{{text}}</template>
          <j-ellipsis v-else :value="text" :length="6"/>
        </template>

        <span slot="processParametersFlag" slot-scope="text">
          <lx-switch v-model="text" disabled checked-children="有" un-checked-children="无"/>
        </span>
        <span
          slot="precisionParametersFlag"
          slot-scope="text"
        >
          <lx-switch
            v-model="text"
            disabled
            checked-children="有"
            un-checked-children="无"
          />
        <span slot="precisionParametersFlag" slot-scope="text">
          <lx-switch v-model="text" disabled checked-children="有" un-checked-children="无"/>
        </span>
        <span
          slot="action"
          slot-scope="text, record"
        >
        <span slot="action" slot-scope="text, record">
          <a @click.stop="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <!--              <a-menu-item>-->
              <!--                <a href="javascript:;" @click="handleOpenNameplateModal([record])">铭牌</a>-->
              <!--              </a-menu-item>-->
              <a-menu-item>
                <a
                  href="javascript:;"
                  @click="handleOpenResumeDrawer(record)"
                >履历</a>
                <a href="javascript:;" @click="handleOpenResumeDrawer(record)">履历</a>
              </a-menu-item>
              <a-menu-item>
                <a
                  href="javascript:;"
                  @click="handleDetail(record)"
                >详情</a>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item v-if="isShowAuth('eam:equipment:delete')">
                <a-popconfirm
                  title="确定删除吗?"
                  @confirm="() => handleDelete(record.id)"
                >
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
@@ -349,602 +333,543 @@
    </div>
    <!-- table区域-end -->

    <a-tabs
      v-model="activeTabKey"
      @change="handleTabChange"
    >
      <a-tab-pane
        tab="设备文档"
        :key="1"
      >
        <eam-equipment-attachment-list ref="tabPaneTableListRef1" />
    <a-tabs v-model="activeTabKey" @change="handleTabChange">
      <a-tab-pane tab="设备文档" :key="1">
        <eam-equipment-attachment-list ref="tabPaneTableListRef1"/>
      </a-tab-pane>
      <a-tab-pane
        tab="点检工单"
        :key="2"
      >
        <eam-inspection-order-list
          ref="tabPaneTableListRef2"
          :isDisplayOperation="false"
        />
      <a-tab-pane tab="点检工单" :key="2">
        <eam-inspection-order-list ref="tabPaneTableListRef2" :isDisplayOperation="false"/>
      </a-tab-pane>
      <!--      <a-tab-pane tab="周保工单" :key="3">
        <eam-week-maintenance-order-list ref="tabPaneTableListRef3" :isDisplayOperation="false"/>
      </a-tab-pane>-->
      <a-tab-pane
        tab="二保工单"
        :key="3"
      >
        <eam-second-maintenance-order-list
          ref="tabPaneTableListRef3"
          :isDisplayOperation="false"
        />
      <a-tab-pane tab="二保工单" :key="3">
        <eam-second-maintenance-order-list ref="tabPaneTableListRef3" :isDisplayOperation="false"/>
      </a-tab-pane>
      <a-tab-pane
        tab="三保工单"
        :key="4"
      >
        <eam-third-maintenance-order-list
          ref="tabPaneTableListRef4"
          :isDisplayOperation="false"
        />
      <a-tab-pane tab="三保工单" :key="4">
        <eam-third-maintenance-order-list ref="tabPaneTableListRef4" :isDisplayOperation="false"/>
      </a-tab-pane>
      <a-tab-pane
        tab="维修工单"
        :key="5"
      >
        <eam-repair-order-list
          ref="tabPaneTableListRef5"
          :isDisplayOperation="false"
        />
      <a-tab-pane tab="维修工单" :key="5">
        <eam-repair-order-list ref="tabPaneTableListRef5" :isDisplayOperation="false"/>
      </a-tab-pane>
      <a-tab-pane
        tab="保养标准"
        :key="6"
      >
        <eam-maintenance-standard-list
          ref="tabPaneTableListRef6"
          :isDisplayOperation="false"
        />
      <a-tab-pane tab="保养标准" :key="6">
        <eam-maintenance-standard-list ref="tabPaneTableListRef6" :isDisplayOperation="false"/>
      </a-tab-pane>
      <a-tab-pane
        tab="工艺参数"
        :key="7"
        v-if="isOpenProcess"
      >
        <eam-equipment-process-list
          ref="tabPaneTableListRef7"
          :isDisplayOperation="false"
        />
      <a-tab-pane tab="工艺参数" :key="7" v-if="isOpenProcess">
        <eam-equipment-process-list ref="tabPaneTableListRef7" :isDisplayOperation="false"/>
      </a-tab-pane>
      <a-tab-pane
        tab="设备精度"
        :key="8"
        v-if="isOpenPrecision"
      >
        <eam-equipment-precision-list
          ref="tabPaneTableListRef8"
          :isDisplayOperation="false"
        />
      <a-tab-pane tab="设备精度" :key="8" v-if="isOpenPrecision">
        <eam-equipment-precision-list ref="tabPaneTableListRef8" :isDisplayOperation="false"/>
      </a-tab-pane>
      <a-tab-pane
        tab="设备油液"
        :key="9"
      >
        <eam-equipment-fluid-list
          ref="tabPaneTableListRef9"
          :isDisplayOperation="false"
        />
      <a-tab-pane tab="设备油液" :key="9">
        <eam-equipment-fluid-list ref="tabPaneTableListRef9" :isDisplayOperation="false"/>
      </a-tab-pane>
    </a-tabs>

    <!-- 表单区域 -->
    <eamEquipment-modal
      ref="modalForm"
      @ok="modalFormOk"
    ></eamEquipment-modal>
    <eamEquipment-modal ref="modalForm" @ok="modalFormOk"/>
    <!--铭牌弹窗-->
    <nameplate-modal
      ref="nameplateModalRef"
      :printedRows="printedRows"
    />
    <nameplate-modal ref="nameplateModalRef" :printedRows="printedRows"/>
    <!--履历弹窗-->
    <resume-drawer
      ref="resumeDrawerRef"
      :currentTableRowRecord="currentTableRowRecord"
    />
    <resume-drawer ref="resumeDrawerRef" :currentTableRowRecord="currentTableRowRecord"/>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import EamEquipmentModal from './modules/EamEquipmentModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, templateXlsDownload } from '@api/manage'
import NameplateModal from '@views/eam/equipment/modules/NameplateModal.vue'
import { getSystemConfigValue } from '@api/api'
import ResumeDrawer from '@views/eam/equipment/modules/ResumeDrawer.vue'
import EamMaintenanceStandardList from '@views/eam/base/EamMaintenanceStandardList.vue'
import EamRepairOrderList from '../repair/EamRepairOrderList'
import EamInspectionOrderList from '../maintenance/EamInspectionOrderList'
import EamEquipmentAttachmentList from '@views/eam/equipment/EamEquipmentAttachmentList.vue'
// import EamWeekMaintenanceOrderList from '@views/eam/maintenance/EamWeekMaintenanceOrderList.vue'
import EamEquipmentProcessList from '@views/eam/equipment/modules/EamEquipmentProcessList.vue'
import EamEquipmentPrecisionList from '@views/eam/equipment/modules/EamEquipmentPrecisionList.vue'
import EamSecondMaintenanceOrderList from '@views/eam/maintenance/EamSecondMaintenanceOrderList.vue'
import EamThirdMaintenanceOrderList from '@views/eam/maintenance/EamThirdMaintenanceOrderList.vue'
import EamEquipmentFluidList from '@views/eam/equipment/modules/EamEquipmentFluidList.vue'
  import '@/assets/less/TableExpand.less'
  import EamEquipmentModal from './modules/EamEquipmentModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction, templateXlsDownload } from '@api/manage'
  import NameplateModal from '@views/eam/equipment/modules/NameplateModal.vue'
  import { getSystemConfigValue } from '@api/api'
  import ResumeDrawer from '@views/eam/equipment/modules/ResumeDrawer.vue'
  import EamMaintenanceStandardList from '@views/eam/base/EamMaintenanceStandardList.vue'
  import EamRepairOrderList from '../repair/EamRepairOrderList'
  import EamInspectionOrderList from '../maintenance/EamInspectionOrderList'
  import EamEquipmentAttachmentList from '@views/eam/equipment/EamEquipmentAttachmentList.vue'
  import EamEquipmentProcessList from '@views/eam/equipment/modules/EamEquipmentProcessList.vue'
  import EamEquipmentPrecisionList from '@views/eam/equipment/modules/EamEquipmentPrecisionList.vue'
  import EamSecondMaintenanceOrderList from '@views/eam/maintenance/EamSecondMaintenanceOrderList.vue'
  import EamThirdMaintenanceOrderList from '@views/eam/maintenance/EamThirdMaintenanceOrderList.vue'
  import EamEquipmentFluidList from '@views/eam/equipment/modules/EamEquipmentFluidList.vue'

export default {
  name: 'EamEquipmentList',
  mixins: [JeecgListMixin],
  components: {
    EamInspectionOrderList,
    EamRepairOrderList,
    EamMaintenanceStandardList,
    ResumeDrawer,
    NameplateModal,
    EamEquipmentModal,
    EamEquipmentAttachmentList,
    // EamWeekMaintenanceOrderList,
    EamEquipmentProcessList,
    EamEquipmentPrecisionList,
    EamSecondMaintenanceOrderList,
    EamThirdMaintenanceOrderList,
    EamEquipmentFluidList
  },
  data() {
    return {
      description: '设备台账管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          fixed: 'left'
        },
        {
          title: '设备编号',
          align: 'center',
          width: 100,
          dataIndex: 'equipmentCode',
          ellipsis: true,
          fixed: 'left',
          sorter: true
        },
        {
          title: '设备名称',
          align: 'center',
          width: 100,
          dataIndex: 'equipmentName',
          ellipsis: true,
          fixed: 'left'
        },
        {
          title: '设备型号',
          align: 'center',
          width: 200,
          dataIndex: 'equipmentModel'
        },
        {
          title: '出厂日期',
          align: 'center',
          width: 100,
          dataIndex: 'leaveFactoryDate'
        },
        {
          title: '投用日期',
          align: 'center',
          width: 100,
          dataIndex: 'acceptanceCheckDate'
        },
        {
          title: '原值(元)',
          align: 'center',
          dataIndex: 'originalValue'
        },
        {
          title: '使用车间',
          align: 'center',
          width: 100,
          dataIndex: 'orgId_dictText'
        },
        {
          title: '资产使用状态',
          align: 'center',
          width: 120,
          dataIndex: 'assetStatus_dictText'
        },
        {
          title: '维修状态',
          align: 'center',
          width: 100,
          dataIndex: 'repairStatus_dictText'
        },
        {
          title: '保养状态',
          align: 'center',
          width: 100,
          dataIndex: 'maintenanceStatus_dictText'
        },
        {
          title: '设备用途',
          align: 'center',
          width: 100,
          dataIndex: 'equipmentUse_dictText'
        },
        {
          title: '操作工',
          align: 'center',
          width: 100,
          dataIndex: 'operator'
        },
        {
          title: '管理分类',
          align: 'center',
          width: 120,
          dataIndex: 'equipmentImportance_dictText',
        },
        {
          title: '技术状态',
          align: 'center',
          width: 100,
          dataIndex: 'technologyStatus_dictText'
        },
        {
          title: '设备责任人',
          align: 'center',
          width: 100,
          dataIndex: 'equipmentManager_dictText'
        },
        {
          title: '设备类别',
          align: 'center',
          dataIndex: 'equipmentCategory_dictText'
        },
        {
          title: '设备种类',
          align: 'center',
          dataIndex: 'equipmentType_dictText'
        },
        {
          title: '设备规格',
          align: 'center',
          width: 100,
          dataIndex: 'equipmentSpecification'
        },
        {
          title: '电机台数',
          align: 'center',
          width: 100,
          dataIndex: 'motorsNumber'
        },
        {
          title: '总功率(KW)',
          align: 'center',
          width: 100,
          dataIndex: 'equipmentPower'
        },
        {
          title: '重量(吨)',
          align: 'center',
          width: 100,
          dataIndex: 'equipmentWeight'
        },
        {
          title: '安装位置',
          align: 'center',
          width: 100,
          ellipsis: true,
          dataIndex: 'installationPosition'
        },
        {
          title: '出厂编号',
          align: 'center',
          dataIndex: 'factoryNumber'
        },
        {
          title: '机床厂家',
          align: 'center',
          width: 300,
          ellipsis: true,
          dataIndex: 'manufacturingEnterprise'
        },
        {
          title: '来源国家',
          align: 'center',
          width: 100,
          dataIndex: 'originCountry'
        },
        {
          title: '设备供应商',
          align: 'center',
          width: 100,
          ellipsis: true,
          dataIndex: 'supplier'
        },
        {
          title: '有无工艺参数',
          align: 'center',
          width: 120,
          dataIndex: 'processParametersFlag',
          scopedSlots: { customRender: 'processParametersFlag' }
        },
        {
          title: '有无精度参数',
          align: 'center',
          width: 120,
          dataIndex: 'precisionParametersFlag',
          scopedSlots: { customRender: 'precisionParametersFlag' }
        },
        {
          title: '外形尺寸',
          align: 'center',
          dataIndex: 'overallDimensions'
        },
        {
          title: '资金来源',
          align: 'center',
          dataIndex: 'fundingSource'
        },
        {
          title: '功能用途',
          align: 'center',
          ellipsis: true,
          dataIndex: 'functionUse'
        },
        {
          title: '性能指标',
          align: 'center',
          ellipsis: true,
          dataIndex: 'performanceIndicators'
        },
        {
          title: '入帐时间',
          align: 'center',
          width: 100,
          dataIndex: 'bookingTime'
        },
        {
          title: '创建人',
          align: 'center',
          width: 100,
          dataIndex: 'createBy_dictText'
        },
        {
          title: '创建时间',
          align: 'center',
          width: 200,
          dataIndex: 'createTime'
        },
        {
          title: '更新人',
          align: 'center',
          dataIndex: 'updateBy_dictText'
        },
        {
          title: '更新时间',
          align: 'center',
          dataIndex: 'updateTime'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 150,
          scopedSlots: { customRender: 'action' },
          fixed: 'right'
        }
      ],
      url: {
        list: '/eam/equipment/list',
        delete: '/eam/equipment/delete',
        deleteBatch: '/eam/equipment/deleteBatch',
        exportXlsUrl: 'eam/equipment/exportXls',
        importExcelUrl: 'eam/equipment/importExcel',
        loadProductionOptions: '/mdc/mdcProduction/loadProductionTreeOptions',
        templateXlsDownloadUrl: '导入模板/设备台账导入模板_v1.1.xlsx'
      },
      treeData: [],
      printedRows: [],
      activeTabKey: 1,
      appHomeUrl: '',
      currentTableRowRecord: {},
      isOpenProcess: false,
      isOpenPrecision: false,
      treeDataAlias: [],
      leaveFactoryDate: [],
      acceptanceCheckDate: [],
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  export default {
    name: 'EamEquipmentList',
    mixins: [JeecgListMixin],
    components: {
      EamInspectionOrderList,
      EamRepairOrderList,
      EamMaintenanceStandardList,
      ResumeDrawer,
      NameplateModal,
      EamEquipmentModal,
      EamEquipmentAttachmentList,
      EamEquipmentProcessList,
      EamEquipmentPrecisionList,
      EamSecondMaintenanceOrderList,
      EamThirdMaintenanceOrderList,
      EamEquipmentFluidList
    },
  },
  created() {
    this.loadAllProductionTree()
    this.loadAppHomeUrlConfigValue()
  },
  methods: {
    leaveFactoryRangeChange(valueArray) {
      this.queryParam.leaveFactoryStartTime = valueArray[0]
      this.queryParam.leaveFactoryEndTime = valueArray[1]
    },
    acceptanceCheckRangeChange(valueArray) {
      this.queryParam.acceptanceCheckStartTime = valueArray[0]
      this.queryParam.acceptanceCheckEndTime = valueArray[1]
    },
    loadAllProductionTree() {
      //加载车间选择树
      getAction(this.url.loadProductionOptions).then(res => {
        if (res.success) {
          this.treeData = [...res.result]
          this.treeDataAlias = this.deepCopyAndModify(res.result)
          console.info('treeDataAlias====', this.treeDataAlias)
        } else {
          that.$message.warning(res.message)
        }
      })
    },

    /**
     * 开启铭牌弹窗
     * @param recordArray 表格行信息集合
     */
    handleOpenNameplateModal(recordArray) {
      this.printedRows = recordArray
      this.$refs.nameplateModalRef.httpUrl = this.appHomeUrl
      this.$refs.nameplateModalRef.visible = true
    },

    /**
     * 开启履历抽屉
     * @param record 表格行信息
     */
    handleOpenResumeDrawer(record) {
      this.currentTableRowRecord = Object.assign({}, record)
      this.$refs.resumeDrawerRef.title = '设备履历' + `（${record.equipmentCode}）`
      this.$refs.resumeDrawerRef.dataSource = []
      this.$refs.resumeDrawerRef.visible = true
      this.$nextTick(() => this.$refs.resumeDrawerRef.getEquipmentResumeByApi())
    },

    /**
     * 自定义设备台账表格行
     * @param record 表格行信息
     * @returns {{style: {cursor: string}, on: {click: *}}} 样式对象与事件方法
     */
    customTableRow(record) {
    data() {
      return {
        style: {
          cursor: 'pointer'
        },
        on: {
          click: () => {
            this.onSelectChange([record.id])
        description: '设备台账管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            },
            fixed: 'left'
          },
          {
            title: '设备编号',
            align: 'center',
            width: 150,
            dataIndex: 'equipmentCode',
            fixed: 'left',
            sorter: true
          },
          {
            title: '设备名称',
            align: 'center',
            width: 150,
            dataIndex: 'equipmentName',
            scopedSlots: { customRender: 'ellipsisText' },
            fixed: 'left'
          },
          {
            title: '设备型号',
            align: 'center',
            width: 150,
            dataIndex: 'equipmentModel'
          },
          {
            title: '出厂日期',
            align: 'center',
            width: 100,
            dataIndex: 'leaveFactoryDate'
          },
          {
            title: '投用日期',
            align: 'center',
            width: 100,
            dataIndex: 'acceptanceCheckDate'
          },
          {
            title: '原值(元)',
            align: 'center',
            dataIndex: 'originalValue',
            width: 120
          },
          {
            title: '使用车间',
            align: 'center',
            width: 150,
            dataIndex: 'orgId_dictText'
          },
          {
            title: '资产使用状态',
            align: 'center',
            width: 120,
            dataIndex: 'assetStatus_dictText'
          },
          {
            title: '维修状态',
            align: 'center',
            width: 100,
            dataIndex: 'repairStatus_dictText'
          },
          {
            title: '保养状态',
            align: 'center',
            width: 100,
            dataIndex: 'maintenanceStatus_dictText'
          },
          {
            title: '设备用途',
            align: 'center',
            width: 100,
            dataIndex: 'equipmentUse_dictText'
          },
          {
            title: '操作工',
            align: 'center',
            width: 100,
            dataIndex: 'operator'
          },
          {
            title: '管理分类',
            align: 'center',
            width: 100,
            dataIndex: 'equipmentImportance_dictText'
          },
          {
            title: '技术状态',
            align: 'center',
            width: 100,
            dataIndex: 'technologyStatus_dictText'
          },
          {
            title: '设备责任人',
            align: 'center',
            width: 100,
            dataIndex: 'equipmentManager_dictText'
          },
          {
            title: '设备类别',
            align: 'center',
            dataIndex: 'equipmentCategory_dictText',
            width: 100
          },
          {
            title: '设备种类',
            align: 'center',
            dataIndex: 'equipmentType_dictText',
            width: 150
          },
          {
            title: '设备规格',
            align: 'center',
            width: 150,
            dataIndex: 'equipmentSpecification'
          },
          {
            title: '电机台数',
            align: 'center',
            width: 100,
            dataIndex: 'motorsNumber'
          },
          {
            title: '总功率(KW)',
            align: 'center',
            width: 100,
            dataIndex: 'equipmentPower'
          },
          {
            title: '重量(吨)',
            align: 'center',
            width: 100,
            dataIndex: 'equipmentWeight'
          },
          {
            title: '安装位置',
            align: 'center',
            width: 150,
            dataIndex: 'installationPosition',
            scopedSlots: { customRender: 'ellipsisText' }
          },
          {
            title: '出厂编号',
            align: 'center',
            dataIndex: 'factoryNumber',
            width: 150
          },
          {
            title: '机床厂家',
            align: 'center',
            width: 150,
            dataIndex: 'manufacturingEnterprise',
            scopedSlots: { customRender: 'ellipsisText' }
          },
          {
            title: '来源国家',
            align: 'center',
            width: 100,
            dataIndex: 'originCountry'
          },
          {
            title: '设备供应商',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'ellipsisText' },
            dataIndex: 'supplier'
          },
          {
            title: '有无工艺参数',
            align: 'center',
            width: 120,
            dataIndex: 'processParametersFlag',
            scopedSlots: { customRender: 'processParametersFlag' }
          },
          {
            title: '有无精度参数',
            align: 'center',
            width: 120,
            dataIndex: 'precisionParametersFlag',
            scopedSlots: { customRender: 'precisionParametersFlag' }
          },
          {
            title: '外形尺寸',
            align: 'center',
            dataIndex: 'overallDimensions',
            width: 120
          },
          {
            title: '资金来源',
            align: 'center',
            dataIndex: 'fundingSource',
            width: 120
          },
          {
            title: '功能用途',
            align: 'center',
            scopedSlots: { customRender: 'ellipsisText' },
            dataIndex: 'functionUse',
            width: 150
          },
          {
            title: '性能指标',
            align: 'center',
            ellipsis: true,
            dataIndex: 'performanceIndicators',
            width: 120
          },
          {
            title: '入帐时间',
            align: 'center',
            width: 100,
            dataIndex: 'bookingTime'
          },
          {
            title: '创建人',
            align: 'center',
            width: 100,
            dataIndex: 'createBy_dictText'
          },
          {
            title: '创建时间',
            align: 'center',
            width: 200,
            dataIndex: 'createTime'
          },
          {
            title: '更新人',
            align: 'center',
            dataIndex: 'updateBy_dictText',
            width: 100
          },
          {
            title: '更新时间',
            align: 'center',
            dataIndex: 'updateTime',
            width: 200
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark',
            width: 150,
            scopedSlots: { customRender: 'ellipsisText' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'action' },
            fixed: 'right'
          }
        }
        ],
        url: {
          list: '/eam/equipment/list',
          delete: '/eam/equipment/delete',
          deleteBatch: '/eam/equipment/deleteBatch',
          exportXlsUrl: 'eam/equipment/exportXls',
          importExcelUrl: 'eam/equipment/importExcel',
          loadProductionOptions: '/mdc/mdcProduction/loadProductionTreeOptions',
          templateXlsDownloadUrl: '导入模板/设备台账导入模板_v1.1.xlsx'
        },
        treeData: [],
        printedRows: [],
        activeTabKey: 1,
        appHomeUrl: '',
        currentTableRowRecord: {},
        isOpenProcess: false,
        isOpenPrecision: false,
        treeDataAlias: [],
        leaveFactoryDate: [],
        acceptanceCheckDate: []
      }
    },

    /**
     * 页签改变时触发
     * @param activeTabKey 当前激活的页签key
     */
    handleTabChange(activeTabKey) {
      if (this.selectedRowKeys.length !== 1) return
      this.$nextTick(() => this.loadTabPaneTableData(this.selectedRowKeys[0]))
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },

    /**
     * 加载页签表格数据
     * @param id 设备台账行记录Id
     */
    loadTabPaneTableData(id) {
      this.$refs['tabPaneTableListRef' + this.activeTabKey].queryParam.equipmentId = id
      this.$refs['tabPaneTableListRef' + this.activeTabKey].loadData(1)
    created() {
      this.loadAllProductionTree()
      this.loadAppHomeUrlConfigValue()
    },
    methods: {
      leaveFactoryRangeChange(valueArray) {
        this.queryParam.leaveFactoryStartTime = valueArray[0]
        this.queryParam.leaveFactoryEndTime = valueArray[1]
      },
      acceptanceCheckRangeChange(valueArray) {
        this.queryParam.acceptanceCheckStartTime = valueArray[0]
        this.queryParam.acceptanceCheckEndTime = valueArray[1]
      },
      loadAllProductionTree() {
        //加载车间选择树
        getAction(this.url.loadProductionOptions).then(res => {
          if (res.success) {
            this.treeData = [...res.result]
            this.treeDataAlias = this.deepCopyAndModify(res.result)
            console.info('treeDataAlias====', this.treeDataAlias)
          } else {
            that.$message.warning(res.message)
          }
        })
      },

    /**
     * 设备台账表格多选框状态改变时触发
     * @param selectedRowKeys 已选择的rowKey集合
     * @param selectionRows 当前分页下已选择的行信息集合
     */
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
      this.$refs['tabPaneTableListRef' + this.activeTabKey].queryParam.equipmentId = null
      this.$refs['tabPaneTableListRef' + this.activeTabKey].dataSource = []
      this.$refs['tabPaneTableListRef' + this.activeTabKey].onClearSelected()
      if (selectedRowKeys.length === 1) {
        let row = this.dataSource.find(row => row.id === selectedRowKeys[0]);
        if (row) {
          this.isOpenProcess = (row.processParametersFlag === '1')
          this.isOpenPrecision = (row.precisionParametersFlag === '1')
      /**
       * 开启铭牌弹窗
       * @param recordArray 表格行信息集合
       */
      handleOpenNameplateModal(recordArray) {
        this.printedRows = recordArray
        this.$refs.nameplateModalRef.httpUrl = this.appHomeUrl
        this.$refs.nameplateModalRef.visible = true
      },

      /**
       * 开启履历抽屉
       * @param record 表格行信息
       */
      handleOpenResumeDrawer(record) {
        this.currentTableRowRecord = Object.assign({}, record)
        this.$refs.resumeDrawerRef.title = '设备履历' + `（${record.equipmentCode}）`
        this.$refs.resumeDrawerRef.dataSource = []
        this.$refs.resumeDrawerRef.visible = true
        this.$nextTick(() => this.$refs.resumeDrawerRef.getEquipmentResumeByApi())
      },

      /**
       * 自定义设备台账表格行
       * @param record 表格行信息
       * @returns {{style: {cursor: string}, on: {click: *}}} 样式对象与事件方法
       */
      customTableRow(record) {
        return {
          style: {
            cursor: 'pointer'
          },
          on: {
            click: () => {
              this.onSelectChange([record.id])
            }
          }
        }
      },

      /**
       * 页签改变时触发
       * @param activeTabKey 当前激活的页签key
       */
      handleTabChange(activeTabKey) {
        if (this.selectedRowKeys.length !== 1) return
        this.$nextTick(() => this.loadTabPaneTableData(this.selectedRowKeys[0]))
      },

      /**
       * 加载页签表格数据
       * @param id 设备台账行记录Id
       */
      loadTabPaneTableData(id) {
        this.$refs['tabPaneTableListRef' + this.activeTabKey].queryParam.equipmentId = id
        this.$refs['tabPaneTableListRef' + this.activeTabKey].loadData(1)
      },

      /**
       * 设备台账表格多选框状态改变时触发
       * @param selectedRowKeys 已选择的rowKey集合
       * @param selectionRows 当前分页下已选择的行信息集合
       */
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectionRows = selectionRows
        this.$refs['tabPaneTableListRef' + this.activeTabKey].queryParam.equipmentId = null
        this.$refs['tabPaneTableListRef' + this.activeTabKey].dataSource = []
        this.$refs['tabPaneTableListRef' + this.activeTabKey].onClearSelected()
        if (selectedRowKeys.length === 1) {
          let row = this.dataSource.find(row => row.id === selectedRowKeys[0])
          if (row) {
            this.isOpenProcess = (row.processParametersFlag === '1')
            this.isOpenPrecision = (row.precisionParametersFlag === '1')
          } else {
            this.isOpenProcess = false
            this.isOpenPrecision = false
          }
          this.loadTabPaneTableData(selectedRowKeys[0])
        } else {
          this.isOpenProcess = false
          this.isOpenPrecision = false
        }
        this.loadTabPaneTableData(selectedRowKeys[0])
      } else {
        this.isOpenProcess = false
        this.isOpenPrecision = false
      }
      //tab标签被销毁了，返回第一个tab
      if (!this.isOpenProcess && this.activeTabKey === 6) {
        this.activeTabKey = 1;
      }
      if (!this.isOpenPrecision && this.activeTabKey === 7) {
        this.activeTabKey = 1;
      }
    },

    handleTemplateXlsDownload() {
      templateXlsDownload(this.url.templateXlsDownloadUrl)
    },

    loadAppHomeUrlConfigValue() {
      let params = { settingKey: 'app_home_url' }
      getSystemConfigValue(params).then(res => {
        if (res.success) {
          this.appHomeUrl = res.result.settingValue
        //tab标签被销毁了，返回第一个tab
        if (!this.isOpenProcess && this.activeTabKey === 6) {
          this.activeTabKey = 1
        }
      })
    },
    deepCopyAndModify(arr) {
      // 如果当前元素不是数组或对象，直接返回
      if (!Array.isArray(arr) && typeof arr !== 'object' || arr === null || arr.length === 0) {
        return arr;
      }

      // 如果是数组，创建一个新数组并递归处理每个元素
      if (Array.isArray(arr)) {
        const newArray = [];
        for (let i = 0; i < arr.length; i++) {
          newArray.push(this.deepCopyAndModify(arr[i]));
        if (!this.isOpenPrecision && this.activeTabKey === 7) {
          this.activeTabKey = 1
        }
        return newArray;
      }
      },

      // 如果是对象，创建一个新对象并递归处理每个属性
      const newObj = {};
      for (const key in arr) {
        if (arr.hasOwnProperty(key)) {
          if (key === 'selectable') {
            newObj[key] = true;
          } else if (key === 'children') {
            newObj[key] = this.deepCopyAndModify(arr[key]);
          } else {
            newObj[key] = arr[key];
      handleTemplateXlsDownload() {
        templateXlsDownload(this.url.templateXlsDownloadUrl)
      },

      loadAppHomeUrlConfigValue() {
        let params = { settingKey: 'app_home_url' }
        getSystemConfigValue(params).then(res => {
          if (res.success) {
            this.appHomeUrl = res.result.settingValue
          }

        })
      },
      deepCopyAndModify(arr) {
        // 如果当前元素不是数组或对象，直接返回
        if (!Array.isArray(arr) && typeof arr !== 'object' || arr === null || arr.length === 0) {
          return arr
        }

        // 如果是数组，创建一个新数组并递归处理每个元素
        if (Array.isArray(arr)) {
          const newArray = []
          for (let i = 0; i < arr.length; i++) {
            newArray.push(this.deepCopyAndModify(arr[i]))
          }
          return newArray
        }

        // 如果是对象，创建一个新对象并递归处理每个属性
        const newObj = {}
        for (const key in arr) {
          if (arr.hasOwnProperty(key)) {
            if (key === 'selectable') {
              newObj[key] = true
            } else if (key === 'children') {
              newObj[key] = this.deepCopyAndModify(arr[key])
            } else {
              newObj[key] = arr[key]
            }

          }
        }
        return newObj
      },
      searchReset() {
        this.leaveFactoryDate = []
        this.acceptanceCheckDate = []
        this.queryParam = {}
        this.onClearSelected()
        this.loadTabPaneTableData('-1')
        this.loadData(1)
      }
      return newObj;
    },
    searchReset() {
      this.leaveFactoryDate = []
      this.acceptanceCheckDate = []
      this.queryParam = {}
      this.onClearSelected()
      this.loadTabPaneTableData('-1')
      this.loadData(1);
    },
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
  @import '~@assets/less/common.less';
</style>