1、设备管理台账页面新增打印铭牌功能（二维码还未调试完） 2、mdc模块新增四个利用率相关图表页面

zhaowei

2025-03-26 0bb01174c95cf26e8ac3c432f847b4cc6007bf5a

1、设备管理台账页面新增打印铭牌功能（二维码还未调试完）
2、mdc模块新增四个利用率相关图表页面

 src/views/eam/equipment/EamEquipmentList.vue

@@ -17,18 +17,21 @@
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="关键设备标识">
              <j-dict-select-tag dict-code="yn" placeholder="请选择关键设备标识" v-model="queryParam.equipmentImportance"></j-dict-select-tag>
              <j-dict-select-tag dict-code="yn" placeholder="请选择关键设备标识"
                                 v-model="queryParam.equipmentImportance"></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="资产状态">
                <j-dict-select-tag dict-code="asset_status" placeholder="请选择资产状态" v-model="queryParam.assetStatus"></j-dict-select-tag>
                <j-dict-select-tag dict-code="asset_status" placeholder="请选择资产状态"
                                   v-model="queryParam.assetStatus"></j-dict-select-tag>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="技术状态">
                <j-dict-select-tag dict-code="technology_status" placeholder="请选择技术状态" v-model="queryParam.technologyStatus"></j-dict-select-tag>
                <j-dict-select-tag dict-code="technology_status" placeholder="请选择技术状态"
                                   v-model="queryParam.technologyStatus"></j-dict-select-tag>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
@@ -51,7 +54,8 @@
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="设备分类">
                <j-dict-select-tag dict-code="equipment_category" placeholder="请选择设备分类" v-model="queryParam.equipmentCategory"></j-dict-select-tag>
                <j-dict-select-tag dict-code="equipment_category" placeholder="请选择设备分类"
                                   v-model="queryParam.equipmentCategory"></j-dict-select-tag>
              </a-form-item>
            </a-col>
          </template>
@@ -61,7 +65,7 @@
              <a-button type="info" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
@@ -81,12 +85,12 @@
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <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>
@@ -112,27 +116,30 @@
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="equipmentImportance" slot-scope="text">
          <lx-switch v-model="text" disabled checked-children="是" un-checked-children="否" />
          <lx-switch v-model="text" disabled checked-children="是" un-checked-children="否"/>
        </span>
        <span slot="mdcFlag" slot-scope="text">
          <lx-switch v-model="text" disabled checked-children="是" un-checked-children="否" />
          <lx-switch v-model="text" disabled checked-children="是" un-checked-children="否"/>
        </span>
        <span slot="processParametersFlag" slot-scope="text">
          <lx-switch v-model="text" disabled checked-children="有" un-checked-children="无" />
          <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="无" />
          <lx-switch v-model="text" disabled checked-children="有" un-checked-children="无"/>
        </span>
        <span slot="specialEquipment" slot-scope="text">
          <lx-switch v-model="text" disabled checked-children="是" un-checked-children="否" />
          <lx-switch v-model="text" disabled checked-children="是" un-checked-children="否"/>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="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="handleDetail(record)">详情</a>
              </a-menu-item>
@@ -151,6 +158,8 @@

    <!-- è¡¨å•åŒºåŸŸ -->
    <eamEquipment-modal ref="modalForm" @ok="modalFormOk"></eamEquipment-modal>
    <!--铭牌弹窗-->
    <nameplate-modal ref="nameplateModalRef"/>
  </a-card>
</template>

@@ -159,11 +168,13 @@
import EamEquipmentModal from './modules/EamEquipmentModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@api/manage'
import NameplateModal from '@views/eam/equipment/modules/NameplateModal.vue'

export default {
  name: 'EamEquipmentList',
  mixins: [JeecgListMixin],
  components: {
    NameplateModal,
    EamEquipmentModal
  },
  data() {
@@ -189,7 +200,7 @@
          dataIndex: 'equipmentCode',
          ellipsis: true,
          fixed: 'left',
          sorter: true,
          sorter: true
        },
        {
          title: '设备名称',
@@ -399,9 +410,9 @@
        deleteBatch: '/eam/equipment/deleteBatch',
        exportXlsUrl: 'eam/equipment/exportXls',
        importExcelUrl: 'eam/equipment/importExcel',
        loadProductionOptions:'/mdc/mdcProduction/loadProductionTreeOptions'
        loadProductionOptions: '/mdc/mdcProduction/loadProductionTreeOptions'
      },
      treeData: [],
      treeData: []
    }
  },
  computed: {
@@ -410,7 +421,7 @@
    }
  },
  created() {
    this.loadAllProductionTree();
    this.loadAllProductionTree()
  },
  methods: {
    loadAllProductionTree() {
@@ -418,11 +429,20 @@
      getAction(this.url.loadProductionOptions).then(res => {
        if (res.success) {
          this.treeData = [...res.result]
        }else {
        } else {
          that.$message.warning(res.message)
        }
      })
    },

    /**
     * å¼€å¯é“­ç‰Œå¼¹çª—
     * @param record
     */
    handleOpenNameplateModal(record) {
      this.$refs.nameplateModalRef.model = Object.assign({}, record)
      this.$refs.nameplateModalRef.visible = true
    }
  }
}
</script>

 src/views/eam/equipment/modules/NameplateModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,110 @@
<template>
  <j-modal
    title="铭牌"
    :width="750"
    :visible="visible"
    @ok="handleOk"
    @cancel="visible=false"
    :maskClosable="false"
  >
    <table id="nameplateTable" border="1" cellpadding="12" cellspacing="0" align="center" width="80%">
      <thead>
      <tr>
        <th colspan="3">设备管理牌</th>
      </tr>
      </thead>

      <tbody>
      <tr>
        <td rowspan="3">

        </td>
        <td>设备编号</td>
        <td>{{ model.equipmentCode }}</td>
      </tr>

      <tr>
        <td>设备名称</td>
        <td>{{ model.equipmentName }}</td>
      </tr>

      <tr>
        <td>设备型号</td>
        <td>{{ model.equipmentModel }}</td>
      </tr>

      <tr>
        <td>设备管理</td>
        <td>使用部门</td>
        <td>{{ model.orgId_dictText }}</td>
      </tr>

      <tr>
        <td rowspan="3">123123123123</td>
        <td>出厂编号</td>
        <td>{{ model.factoryNumber }}</td>
      </tr>

      <tr>
        <td>设备管理员</td>
        <td>{{ model.equipmentManager_dictText }}</td>
      </tr>

      <tr>
        <td>安装位置</td>
        <td>{{ model.installationPosition }}</td>
      </tr>

      <tr>
        <td>MES</td>
        <td colspan="2" style="color: #f00;font-weight: bold;letter-spacing: 1px">非管理员勿动此铭牌</td>
      </tr>
      </tbody>
    </table>

    <template slot="footer">
      <a-button>关闭</a-button>
      <a-button type="primary" v-print="'#nameplateTable'">打印</a-button>
    </template>
  </j-modal>
</template>

<script>
export default {
  name: 'NameplateModal',
  components: {  },
  data() {
    return {
      title: '铭牌',
      visible: false,
      disableSubmit: false,
      model: {},
      url: {}
    }
  },
  methods: {
    handleOk() {

    }
  }
}
</script>

<style lang="less" scoped>
table {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: #000;
  text-align: center;

  th {
    font-size: 28px;
    letter-spacing: 3px;
    padding: 20px;
  }

  td {
    font-size: 18px;
    width: 33%;
  }
}
</style>

 src/views/mdc/base/DeliveryGroupUtilizationRateChart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,82 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
            <a-tab-pane v-if="isDepartType == 0" key="2" tab="部门层级">,
              <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <ChartComponent :nodePeople='selectPeople' :nodeTree='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import BaseTree from '../common/BaseTree'
import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
import { mapActions } from 'vuex'
import ChartComponent from '@views/mdc/base/modules/DeliveryGroupUtilizationRateChart/ChartComponent.vue'

export default {
  name: 'DeliveryGroupUtilizationRateChart',
  components: {
    ChartComponent,
    BaseTree,
    DepartTree,
  },
  data() {
    return {
      activeKey: '1',
      selectEquipment: {},
      selectPeople: {},
      selectTypeTree: '',
      isDepartType: ''
    }
  },
  created() {
    this.queryTreeData()
  },
  methods: {
    ...mapActions(['QueryDepartTree']),

    queryTreeData() {
      this.QueryDepartTree().then(res => {
        if (res.success) {
          this.isDepartType = res.result[0].value
        } else {
          this.$notification.warning({
            message: '消息',
            description: res.message
          })
        }
      }).finally(() => {
      })
    },

    tabChange(val) {
      this.activeKey = val
      this.selectTypeTree = val
    },

    changeSelectionNode(val) {
      this.selectEquipment = val
      this.selectTypeTree = '1'
    },

    changeSelectionNodedd(val) {
      this.selectPeople = val
      this.selectTypeTree = '2'
    }
  }

}
</script>

 src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,82 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
            <a-tab-pane v-if="isDepartType == 0" key="2" tab="部门层级">,
              <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <ChartComponent :nodePeople='selectPeople' :nodeTree='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import BaseTree from '../common/BaseTree'
import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
import { mapActions } from 'vuex'
import ChartComponent from '@views/mdc/base/modules/GroupEquipmentUtilizationRateChart/ChartComponent.vue'

export default {
  name: 'GroupEquipmentUtilizationRateChart',
  components: {
    ChartComponent,
    BaseTree,
    DepartTree,
  },
  data() {
    return {
      activeKey: '1',
      selectEquipment: {},
      selectPeople: {},
      selectTypeTree: '',
      isDepartType: ''
    }
  },
  created() {
    this.queryTreeData()
  },
  methods: {
    ...mapActions(['QueryDepartTree']),

    queryTreeData() {
      this.QueryDepartTree().then(res => {
        if (res.success) {
          this.isDepartType = res.result[0].value
        } else {
          this.$notification.warning({
            message: '消息',
            description: res.message
          })
        }
      }).finally(() => {
      })
    },

    tabChange(val) {
      this.activeKey = val
      this.selectTypeTree = val
    },

    changeSelectionNode(val) {
      this.selectEquipment = val
      this.selectTypeTree = '1'
    },

    changeSelectionNodedd(val) {
      this.selectPeople = val
      this.selectTypeTree = '2'
    }
  }

}
</script>

 src/views/mdc/base/GroupUtilizationRateChart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,82 @@
<template>
  <div style="width: 100%; height: 100%;">
    <a-card :bordered="false">
      <a-row type="flex" :gutter="16">
        <a-col :md="5">
          <a-tabs :activeKey="activeKey" @change="tabChange">
            <a-tab-pane key="1" tab="车间层级" force-render>
              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
            </a-tab-pane>
            <a-tab-pane v-if="isDepartType == 0" key="2" tab="部门层级">,
              <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :md="19">
          <ChartComponent :nodePeople='selectPeople' :nodeTree='selectEquipment' :Type="selectTypeTree"/>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import BaseTree from '../common/BaseTree'
import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
import { mapActions } from 'vuex'
import ChartComponent from '@views/mdc/base/modules/GroupUtilizationRateChart/ChartComponent.vue'

export default {
  name: 'GroupUtilizationRateChart',
  components: {
    ChartComponent,
    BaseTree,
    DepartTree,
  },
  data() {
    return {
      activeKey: '1',
      selectEquipment: {},
      selectPeople: {},
      selectTypeTree: '',
      isDepartType: ''
    }
  },
  created() {
    this.queryTreeData()
  },
  methods: {
    ...mapActions(['QueryDepartTree']),

    queryTreeData() {
      this.QueryDepartTree().then(res => {
        if (res.success) {
          this.isDepartType = res.result[0].value
        } else {
          this.$notification.warning({
            message: '消息',
            description: res.message
          })
        }
      }).finally(() => {
      })
    },

    tabChange(val) {
      this.activeKey = val
      this.selectTypeTree = val
    },

    changeSelectionNode(val) {
      this.selectEquipment = val
      this.selectTypeTree = '1'
    },

    changeSelectionNodedd(val) {
      this.selectPeople = val
      this.selectTypeTree = '2'
    }
  }

}
</script>

 src/views/mdc/base/GroupUtilizationRateCompareChart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,177 @@
<template>
  <a-card>
    <div style="display: flex;justify-content: space-between">
      <div id="chart-container-left" style="height: 700px;width: 48%"></div>
      <div id="chart-container-right" style="height: 700px;width: 48%"></div>
    </div>
  </a-card>
</template>

<script>
import api from '@api/mdc'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'GroupUtilizationRateCompareChart',
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      disableMixinCreated: true,
      typeTree: '',
      queryParam: {},
      driveTypeList: [],
      leftChartContainer: null,
      rightChartContainer: null,
      url: {}
    }
  },
  props: { nodeTree: '', Type: '', nodePeople: '' },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.getDriveTypeByApi()
    this.loadData()
    this.handleWindowResize()
  },
  watch: {
    Type(valmath) {
      this.dataList = []
      this.queryParam.typeTree = valmath
    },
    nodeTree(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamEquip.parentId = ''
          this.queryParamEquip.equipmentId = val.equipmentId
        } else {
          this.queryParamEquip.parentId = val.key
          this.queryParamEquip.equipmentId = ''
        }
        this.searchQuery()
      }
    },
    nodePeople(val) {
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamPeople.parentId = val.equipmentId
          this.queryParamPeople.equipmentId = ''
        } else {
          this.queryParamPeople.parentId = val.key
          this.queryParamPeople.equipmentId = ''
        }
        this.searchQuery()
      }
    }
  },
  methods: {
    loadData() {
      this.initChart('left')
      this.initChart('right')
    },

    initChart(position) {
      this[position + 'ChartContainer'] = this.$echarts.init(document.getElementById(`chart-container-${position}`))
      const option = {
        title: {
          text: position === 'left' ? '各班组24小时综合效率对比' : '各班组24小时综合效率对比（去除故障设备时间）',
          left: 'center',
          top: 0,
          textStyle: {
            fontSize: 22
          }
        },
        grid: {
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          bottom: 0,
          right: 'center',
          itemGap: 20,
          data: ['数铣一班', '数铣二班', '数铣三班', '数车班']
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: [
          {
            type: 'value',
            name: '利用率(%)',
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            type: 'line',
            name: '数铣一班',
            yAxisIndex: 0,
            data: [85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24]
          },
          {
            type: 'line',
            name: '数铣二班',
            yAxisIndex: 0,
            data: [23, 42, 76, 54, 87, 34, 53, 76, 54, 87, 34, 53]
          },
          {
            type: 'line',
            name: '数铣三班',
            yAxisIndex: 0,
            data: [10, 84, 21, 42, 53, 57, 32, 21, 42, 53, 57, 32]
          },
          {
            type: 'line',
            name: '数车班',
            yAxisIndex: 0,
            data: [23, 32, 42, 35, 64, 53, 16, 42, 35, 64, 53, 16]
          }
        ]
      }
      this[position + 'ChartContainer'].setOption(option, true)
    },

    // è°ƒç”¨æŽ¥å£èŽ·å–控制系统类型
    getDriveTypeByApi() {
      api.getDriveTypeApi().then((res) => {
        this.driveTypeList = res.result.map(item => item.value)
      })
    },

    /**
     * è”想输入框筛选功能
     * @param input è¾“入的内容
     * @param option é…ç½®
     * @returns {boolean} åˆ¤æ–­æ˜¯å¦ç­›é€‰
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      )
    },

    handleWindowResize() {
      if (this.leftChartContainer) this.leftChartContainer.resize()
      if (this.rightChartContainer) this.rightChartContainer.resize()
    }
  }
}
</script>

<style scoped lang="less">

</style>

 src/views/mdc/base/modules/DeliveryGroupUtilizationRateChart/ChartComponent.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,187 @@
<template>
  <div>
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!--          <a-col :md="5" :sm="5">-->
          <!--            <a-form-item label="设备">-->
          <!--              <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch"-->
          <!--                              placeholder='请选择设备'/>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <!--          <a-col :md="5" :sm="5">-->
          <!--            <a-form-item label="驱动类型">-->
          <!--              <a-auto-complete-->
          <!--                v-model="queryParam.driveType"-->
          <!--                :data-source="driveTypeList"-->
          <!--                placeholder="驱动类型"-->
          <!--                :filter-option="filterOption"-->
          <!--                :allowClear="true"-->
          <!--              />-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <!--          <a-col>-->
          <!--            <a-space>-->
          <!--              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
          <!--              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>-->
          <!--            </a-space>-->
          <!--          </a-col>-->
        </a-row>
      </a-form>
    </div>

    <div id="chart-container" style="height: 700px"></div>
  </div>
</template>

<script>
import api from '@api/mdc'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'ChartComponent',
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      disableMixinCreated: true,
      typeTree: '',
      queryParam: {},
      driveTypeList: [],
      url: {},
      spinning: false
    }
  },
  props: { nodeTree: '', Type: '', nodePeople: '' },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.getDriveTypeByApi()
    this.loadData()
    this.handleWindowResize()
  },
  watch: {
    Type(valmath) {
      this.dataList = []
      this.queryParam.typeTree = valmath
    },
    nodeTree(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamEquip.parentId = ''
          this.queryParamEquip.equipmentId = val.equipmentId
        } else {
          this.queryParamEquip.parentId = val.key
          this.queryParamEquip.equipmentId = ''
        }
        this.searchQuery()
      }
    },
    nodePeople(val) {
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamPeople.parentId = val.equipmentId
          this.queryParamPeople.equipmentId = ''
        } else {
          this.queryParamPeople.parentId = val.key
          this.queryParamPeople.equipmentId = ''
        }
        this.searchQuery()
      }
    }
  },
  methods: {
    loadData() {
      this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
      const option = {
        title: {
          text: '数铣数车配送小组平均设备综合效率',
          left: 'center',
          top: 0,
          textStyle: {
            fontSize: 22
          }
        },
        grid: {
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        legend: {
          top: 0,
          right: 0,
          itemGap: 20,
          data: ['综合效率（全部设备时间）', '综合效率（去除故障设备时间）']
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['李有为组', '丁红燕组', '唐东组', '朱小磊组', '张奇组', '宋宇坤组', '罗军组', '张双进组', '常振勇组', '葛应龙组', '赵广涛组', '于华亭组', '陈峻组', '王继峰组', '王晓明组', '陈林组', '吴吉平组']
        },
        yAxis: [
          {
            type: 'value',
            name: '利用率(%)',
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            type: 'bar',
            name: '综合效率（全部设备时间）',
            // barWidth: '40%',
            data: [85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 63, 74, 11, 58]
          },
          {
            type: 'bar',
            name: '综合效率（去除故障设备时间）',
            // barWidth: '40%',
            data: [24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 54]
          }
        ]
      }
      this.chartContainer.setOption(option, true)
    },

    // è°ƒç”¨æŽ¥å£èŽ·å–控制系统类型
    getDriveTypeByApi() {
      api.getDriveTypeApi().then((res) => {
        this.driveTypeList = res.result.map(item => item.value)
      })
    },

    /**
     * è”想输入框筛选功能
     * @param input è¾“入的内容
     * @param option é…ç½®
     * @returns {boolean} åˆ¤æ–­æ˜¯å¦ç­›é€‰
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      )
    },

    handleWindowResize() {
      if (this.chartContainer) this.chartContainer.resize()
    }
  }
}
</script>

<style scoped lang="less">

</style>

 src/views/mdc/base/modules/GroupEquipmentUtilizationRateChart/ChartComponent.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,242 @@
<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!--          <a-col :md="5" :sm="5">-->
          <!--            <a-form-item label="设备">-->
          <!--              <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch"-->
          <!--                              placeholder='请选择设备'/>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <!--          <a-col :md="5" :sm="5">-->
          <!--            <a-form-item label="驱动类型">-->
          <!--              <a-auto-complete-->
          <!--                v-model="queryParam.driveType"-->
          <!--                :data-source="driveTypeList"-->
          <!--                placeholder="驱动类型"-->
          <!--                :filter-option="filterOption"-->
          <!--                :allowClear="true"-->
          <!--              />-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <a-col :md="5" :sm="5">
            <a-form-item label="月份">
              <a-month-picker v-model="queryParam.month" style="width: 100%" value-format="YYYY-MM" :allowClear="false"
                              placeholder="请选择月份"/>
            </a-form-item>
          </a-col>

          <a-col :md="5" :sm="5">
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div id="chart-container" style="height: 700px"></div>
  </div>
</template>

<script>
import api from '@api/mdc'
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'ChartComponent',
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      disableMixinCreated: true,
      typeTree: '',
      driveTypeList: [],
      url: {},
      queryParam: {
        month: moment().subtract('1', 'month')
      },
      spinning: false
    }
  },
  props: { nodeTree: '', Type: '', nodePeople: '' },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.getDriveTypeByApi()
    this.loadData()
    this.handleWindowResize()
  },
  watch: {
    Type(valmath) {
      this.dataList = []
      this.queryParam.typeTree = valmath
    },
    nodeTree(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamEquip.parentId = ''
          this.queryParamEquip.equipmentId = val.equipmentId
        } else {
          this.queryParamEquip.parentId = val.key
          this.queryParamEquip.equipmentId = ''
        }
        this.searchQuery()
      }
    },
    nodePeople(val) {
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamPeople.parentId = val.equipmentId
          this.queryParamPeople.equipmentId = ''
        } else {
          this.queryParamPeople.parentId = val.key
          this.queryParamPeople.equipmentId = ''
        }
        this.searchQuery()
      }
    }
  },
  methods: {
    loadData() {
      this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
      const option = {
        title: {
          text: '数车班设备综合利用率',
          left: 'center',
          top: 0,
          textStyle: {
            fontSize: 22
          }
        },
        grid: {
          top: '12%',
          left: '1%',
          right: '1%',
          bottom: '8%',
          containLabel: true
        },
        legend: {
          top: '6%',
          right: 'center',
          itemGap: 20,
          data: ['设备综合利用率24h', '设备综合利用率16h']
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['立加u1000-3', '五轴125P', '五坐标加工中心GS1000', 'Aè½´1000PLUS', '梧州80P_2', '雕刻机800TE', '四坐标立加104V', '立加u1000-4', '立加GX710_1', '三坐标立加1350', '卧加H5000-1', '立加u1000-2', '立加1000HS_1', '立加1160_1', '立加GX710_2', '立加u1000-3', '五轴125P', '五坐标加工中心GS1000', 'Aè½´1000PLUS', '梧州80P_2', '雕刻机800TE', '四坐标立加104V', '立加u1000-4', '立加GX710_1', '三坐标立加1350', '卧加H5000-1', '立加u1000-2', '立加1000HS_1', '立加1160_1', '立加GX710_2', '立加u1000-3', '五轴125P', '五坐标加工中心GS1000', 'Aè½´1000PLUS', '梧州80P_2', '雕刻机800TE', '四坐标立加104V'],
          axisLabel: {
            interval: 0, // åæ ‡è½´åˆ»åº¦æ ‡ç­¾çš„显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: 45, // åˆ»åº¦æ ‡ç­¾æ—‹è½¬çš„角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // åˆ»åº¦æ ‡ç­¾æ˜¯å¦æœå†…，默认朝外
            margin: 15, // åˆ»åº¦æ ‡ç­¾ä¸Žè½´çº¿ä¹‹é—´çš„距离
            fontSize: 14,
            color: '#000'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '利用率(%)',
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            type: 'bar',
            name: '设备综合利用率24h',
            data: [53.28, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32],
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%',
              avoidLabelOverlap: true
            }
          },
          {
            type: 'bar',
            name: '设备综合利用率16h',
            data: [63.25, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
          }
        ],
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: 0,
            startValue: 0,
            endValue: 19,
            // æ˜¯å¦æ˜¾ç¤ºdetail，即拖拽时候显示详细数值信息
            showDetail: false,
            // empty：当前数据窗口外的数据，被设置为空。
            // å³ä¸ä¼šå½±å“å…¶ä»–轴的数据范围
            filterMode: 'empty',
            // æŽ§åˆ¶æ‰‹æŸ„的尺寸
            // handleSize: 0,
            // æ˜¯å¦é”å®šé€‰æ‹©åŒºåŸŸï¼ˆæˆ–叫做数据窗口）的大小
            zoomLock: true,
            brushSelect: false
          },
          {
            // æ²¡æœ‰ä¸‹é¢è¿™å—的话，只能拖动滚动条，
            // é¼ æ ‡æ»šè½®åœ¨åŒºåŸŸå†…不能控制外部滚动条
            type: 'inside',
            show: true,
            // æŽ§åˆ¶å“ªä¸ªè½´ï¼Œå¦‚果是number表示控制一个轴，
            xAxisIndex: 0,
            // æ»šè½®æ˜¯å¦è§¦å‘缩放
            zoomOnMouseWheel: false,
            // é¼ æ ‡ç§»åŠ¨èƒ½å¦è§¦å‘平移
            moveOnMouseMove: true,
            // é¼ æ ‡æ»šè½®èƒ½å¦è§¦å‘平移
            moveOnMouseWheel: true
          }
        ]
      }
      this.chartContainer.setOption(option, true)
    },

    // è°ƒç”¨æŽ¥å£èŽ·å–控制系统类型
    getDriveTypeByApi() {
      api.getDriveTypeApi().then((res) => {
        this.driveTypeList = res.result.map(item => item.value)
      })
    },

    /**
     * è”想输入框筛选功能
     * @param input è¾“入的内容
     * @param option é…ç½®
     * @returns {boolean} åˆ¤æ–­æ˜¯å¦ç­›é€‰
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      )
    },

    handleWindowResize() {
      if (this.chartContainer) this.chartContainer.resize()
    }
  }
}
</script>

<style scoped lang="less">

</style>

 src/views/mdc/base/modules/GroupUtilizationRateChart/ChartComponent.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,216 @@
<template>
  <div>
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!--          <a-col :md="5" :sm="5">-->
          <!--            <a-form-item label="设备">-->
          <!--              <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch"-->
          <!--                              placeholder='请选择设备'/>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <!--          <a-col :md="5" :sm="5">-->
          <!--            <a-form-item label="驱动类型">-->
          <!--              <a-auto-complete-->
          <!--                v-model="queryParam.driveType"-->
          <!--                :data-source="driveTypeList"-->
          <!--                placeholder="驱动类型"-->
          <!--                :filter-option="filterOption"-->
          <!--                :allowClear="true"-->
          <!--              />-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <!--          <a-col>-->
          <!--            <a-space>-->
          <!--              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
          <!--              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>-->
          <!--            </a-space>-->
          <!--          </a-col>-->
        </a-row>
      </a-form>
    </div>

    <div id="chart-container" style="height: 700px"></div>
  </div>
</template>

<script>
import api from '@api/mdc'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'ChartComponent',
  components: {},
  mixins: [JeecgListMixin],
  data() {
    return {
      disableMixinCreated: true,
      typeTree: '',
      queryParam: {},
      driveTypeList: [],
      url: {},
      spinning: false
    }
  },
  props: { nodeTree: '', Type: '', nodePeople: '' },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.handleWindowResize)
    this.getDriveTypeByApi()
    this.loadData()
    this.handleWindowResize()
  },
  watch: {
    Type(valmath) {
      this.dataList = []
      this.queryParam.typeTree = valmath
    },
    nodeTree(val) { //监听currSelected å˜åŒ–，将变化后的数值传递给 getCurrSelected äº‹ä»¶
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamEquip.parentId = ''
          this.queryParamEquip.equipmentId = val.equipmentId
        } else {
          this.queryParamEquip.parentId = val.key
          this.queryParamEquip.equipmentId = ''
        }
        this.searchQuery()
      }
    },
    nodePeople(val) {
      if (JSON.stringify(val) != '{}') {
        if (val.equipmentId != null) {
          this.queryParamPeople.parentId = val.equipmentId
          this.queryParamPeople.equipmentId = ''
        } else {
          this.queryParamPeople.parentId = val.key
          this.queryParamPeople.equipmentId = ''
        }
        this.searchQuery()
      }
    }
  },
  methods: {
    loadData() {
      this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
      const option = {
        // color:'#ccc',
        title: {
          text: '数车班设备综合利用率',
          left: 'center',
          top: 0,
          textStyle: {
            fontSize: 22
          }
        },
        grid: {
          top: '10%',
          left: '1%',
          right: '15%',
          bottom: '1%',
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          top: 'center',
          right: 0,
          itemGap: 20,
          data: ['24小时', '24小时（去除故障设备）', '白班', '晚班', '16小时', '累计运行时间(h)']
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: [
          {
            type: 'value',
            name: '利用率(%)',
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}%'
            }
          },
          {
            type: 'value',
            name: '运行时间(h)',
            axisLine: {
              show: true
            }
          }
        ],
        series: [
          {
            type: 'line',
            name: '24小时',
            symbol: 'diamond',
            yAxisIndex: 0,
            symbolSize: 10,
            data: [85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24]
          },
          {
            type: 'line',
            name: '24小时（去除故障设备）',
            symbol: 'rect',
            symbolSize: 10,
            yAxisIndex: 0,
            data: [23, 42, 76, 54, 87, 34, 53, 76, 54, 87, 34, 53]
          },
          {
            type: 'line',
            name: '16小时',
            symbol: 'triangle',
            yAxisIndex: 0,
            symbolSize: 10,
            data: [54, 34, 12, 56, 64, 32, 90, 12, 56, 64, 32, 90]
          },
          {
            type: 'bar',
            name: '累计运行时间(h)',
            yAxisIndex: 1,
            symbolSize: 10,
            barWidth: '40%',
            data: [600, 900, 350, 366, 435, 648, 345, 350, 366, 435, 648, 345]
          }
        ]
      }
      this.chartContainer.setOption(option, true)
    },

    // è°ƒç”¨æŽ¥å£èŽ·å–控制系统类型
    getDriveTypeByApi() {
      api.getDriveTypeApi().then((res) => {
        this.driveTypeList = res.result.map(item => item.value)
      })
    },

    /**
     * è”想输入框筛选功能
     * @param input è¾“入的内容
     * @param option é…ç½®
     * @returns {boolean} åˆ¤æ–­æ˜¯å¦ç­›é€‰
     */
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      )
    },

    handleWindowResize() {
      if (this.chartContainer) this.chartContainer.resize()
    }
  }
}
</script>

<style scoped lang="less">

</style>