1、首页调整技术状态图表禁用显示颜色 2、首页设备级看板操作证信息增加操作工字段 3、全局设备组选择设备增加按照设备编号查询功能

zhuzhuanzhuan

2024-05-09 8f4d079c073edd5d95118158fc60800473026073

1、首页调整技术状态图表禁用显示颜色
2、首页设备级看板操作证信息增加操作工字段
3、全局设备组选择设备增加按照设备编号查询功能

 src/views/dashboard/BranchFactorySignage.vue

@@ -561,7 +561,7 @@
            }
          ]
        }
        option.title.text = `${moment().format('M月D日')}利用率`
        option.title.text = `${moment().subtract(1, 'days').format('M月D日')}利用率`
        this.efficiencyChart.setOption(option, true)
        this.efficiencyChart.hideLoading()

@@ -640,7 +640,7 @@
              center: ['50%', '60%'],
              color: [
                '#0FC61A',
                '#0DAF15',
                '#F56436',
                '#8B8B8B'
              ],
              label: {
@@ -759,7 +759,7 @@
          rowNum: 1,
          data: this.twoMaintenanceChartData,
          index: true,
          columnWidth: [100],
          columnWidth: [100, 300, 300, 300],
          align: ['center', 'center', 'center', 'center']
        }
      },

 src/views/dashboard/EquipmentSignage.vue

@@ -67,9 +67,6 @@
                <a-descriptions-item label="工段">
                  {{equipmentInfo.workShopName|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="操作工">
                  {{operationCertificateInfo.realname|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="设备状态">
                  {{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}
                </a-descriptions-item>
@@ -79,16 +76,26 @@
            <dv-border-box-11 title="操作证信息" class="info-container" style="flex:2;">
              <a-descriptions :column="1">
                <a-descriptions-item label="操作证编号">
                  {{operationCertificateInfo.num|equipmentInfoDisplay}}
                  <a-tooltip>
                    <template slot="title">
                      {{operationCertificateInfo.num|equipmentInfoDisplay}}
                    </template>
                    {{operationCertificateInfo.num|equipmentInfoDisplay}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="当前周期分数">
                  {{operationCertificateInfo.currentCycleScore|equipmentInfoDisplay}}
                </a-descriptions-item>
                <a-descriptions-item label="发证日期">
                  {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}
                <a-descriptions-item label="发证/截止日期">
                  <a-tooltip>
                    <template slot="title" v-if="operationCertificateInfo.issueDate||operationCertificateInfo.endTime">
                      {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
                    </template>
                    {{operationCertificateInfo.issueDate|equipmentInfoDisplay}}/{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="周期截止日期">
                  {{operationCertificateInfo.endTime|equipmentInfoDisplay}}
                <a-descriptions-item label="操作工">
                  {{operationCertificateInfo.realname|equipmentInfoDisplay}}
                </a-descriptions-item>
              </a-descriptions>
            </dv-border-box-11>
@@ -96,10 +103,20 @@
            <dv-border-box-11 title="维护信息" class="info-container" style="flex:2;">
              <a-descriptions :column="1">
                <a-descriptions-item label="下次三保日期">
                  {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
                  <a-tooltip>
                    <template slot="title" v-if="equipmentInfo.nextThirdMaintenanceTime">
                      {{equipmentInfo.nextThirdMaintenanceTime}}
                    </template>
                    {{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="下次二保日期">
                  {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
                  <a-tooltip>
                    <template slot="title" v-if="equipmentInfo.nextSecondMaintenanceTime">
                      {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
                    </template>
                    {{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="技术状态">
                  {{equipmentInfo.technology_status|equipmentInfoDisplay}}
@@ -113,7 +130,8 @@
            <div style="display: flex;justify-content:space-evenly;flex: 1">
              <div style="width: 45%;" class="info-card-container">
                <div class="info-card-title">本月报修次数</div>
                <div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}</div>
                <div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}
                </div>
              </div>

              <div style="width: 45%;" class="info-card-container">
@@ -434,7 +452,7 @@
              // 主标题文本样式
              fontSize: 18,
              fontWeight: 'normal',
              color: '#1AD8DE',
              color: '#1AD8DE'
            }
          },
          tooltip: {
@@ -875,8 +893,6 @@
    padding-bottom: 25px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }

  /deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {

 src/views/dashboard/IndexSignage.vue

@@ -15,39 +15,11 @@
            <div id="warranty_malfunction_chart" style="width:50%;height: 340px;"></div>
          </div>
          <div class="support-plan-container">
            <!--<div v-for="item in supportPlanList" class="support-plan-item"-->
            <!--:style="{background:item.background}">-->
            <!--<div>{{item.label}}</div>-->
            <!--<div class="plan-value-container">-->
            <!--<div class="plan-value">{{item.value}}</div>-->
            <!--<div>台</div>-->
            <!--</div>-->
            <!--</div>-->
            <div class="support-plan-item" style="background:#5FE0AF">
              <div>本月三保计划</div>
            <div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item"
                 :style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)">
              <div>{{item.planTime}}</div>
              <div class="plan-value-container">
                <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div>
                <div>台</div>
              </div>
            </div>
            <div class="support-plan-item" style="background:#409EFF">
              <div>本月完成</div>
              <div class="plan-value-container">
                <div class="plan-value">{{thisMonthMaintenanceRealNum}}</div>
                <div>台</div>
              </div>
            </div>
            <div class="support-plan-item" style="background:#D6BC52">
              <div>下月三保计划</div>
              <div class="plan-value-container">
                <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div>
                <div>台</div>
              </div>
            </div>
            <div class="support-plan-item" style="background:#58D9F9">
              <div>下下月三保计划</div>
              <div class="plan-value-container">
                <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div>
                <div class="plan-value">{{$data[item.planValueLabel]}}</div>
                <div>台</div>
              </div>
            </div>
@@ -68,15 +40,21 @@
        </dv-border-box-9>
      </div>
    </div>

    <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
                  :modalTableColumns="modalTableColumns"
                  @closeModal="modalVisible=false"/>
  </div>
</template>

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

  export default {
    name: 'IndexSignage',
    components: { SignageModal },
    data() {
      return {
        runningStateChart: '',
@@ -100,6 +78,28 @@
          { value: '10', name: '停机' },
          { value: '8', name: '运行' }
        ],
        supportPlanList: [
          {
            planTime: '本月三保计划',
            planValueLabel: 'thisMonthMaintenancePlanNum',
            backgroundColor: '#5FE0AF'
          },
          {
            planTime: '本月完成',
            planValueLabel: 'thisMonthMaintenanceRealNum',
            backgroundColor: '#409EFF'
          },
          {
            planTime: '下月三保计划',
            planValueLabel: 'nextMonthMaintenancePlanNum',
            backgroundColor: '#D6BC52'
          },
          {
            planTime: '下下月三保计划',
            planValueLabel: 'nextNextMonthMaintenancePlanNum',
            backgroundColor: '#58D9F9'
          }
        ],
        thisMonthMaintenancePlanNum: 0,
        thisMonthMaintenanceRealNum: 0,
        nextMonthMaintenancePlanNum: 0,
@@ -111,7 +111,11 @@
        doubleBarChartData: {},
        efficiencyChartConfig: {},
        maintenanceConfig: {},
        problemConfig: {}
        problemConfig: {},
        modalVisible: false,
        modalTitle: '',
        modalDataApiUrl: '',
        modalTableColumns: []
      }
    },
    mounted() {
@@ -431,7 +435,7 @@
            }
          },
          xAxis: {
            name: '单位',
            name: '',
            nameTextStyle: {
              color: '#fff'
            },
@@ -558,7 +562,7 @@
            }
          ]
        }
        option.title.text = `${moment().format('M月D日')}利用率`
        option.title.text = `${moment().subtract(1, 'days').format('M月D日')}利用率`
        this.efficiencyChart.setOption(option, true)
        this.efficiencyChart.hideLoading()
        this.efficiencyChart.on('click', params => {
@@ -638,7 +642,7 @@
              center: ['45%', '60%'],
              color: [
                '#0FC61A',
                '#0DAF15',
                '#F56436',
                '#8B8B8B'
              ],
              label: {
@@ -665,6 +669,50 @@
        }
        this.techConditionChart.setOption(option, true)
        this.techConditionChart.hideLoading()

        // this.techConditionChart.on('click', params => {
        //   console.log('params', params)
        //   this.modalTitle = '技术状态'
        //   this.modalTableColumns = [
        //     {
        //       title: '#',
        //       dataIndex: '',
        //       key: 'rowIndex',
        //       width: 60,
        //       align: 'center',
        //       customRender: function(t, r, index) {
        //         return parseInt(index) + 1
        //       }
        //     },
        //     {
        //       title: '设备编号',
        //       dataIndex: 'equipmentId',
        //       key: 'equipmentId'
        //     },
        //     {
        //       title: '设备名称',
        //       dataIndex: 'equipmentName',
        //       key: 'equipmentName'
        //     },
        //     {
        //       title: '设备型号',
        //       dataIndex: 'equipmentModel',
        //       key: 'equipmentModel'
        //     },
        //     {
        //       title: '设备类型',
        //       key: 'equipmentType',
        //       dataIndex: 'equipmentType'
        //     },
        //     {
        //       title: '驱动类型',
        //       key: 'driveType',
        //       dataIndex: 'driveType'
        //     }
        //   ]
        //   this.modalDataApiUrl = '/mdc/mdcEquipment/list'
        //   this.modalVisible = true
        // })
      },

      /* 绘制设备报修故障饼图 */
@@ -744,6 +792,45 @@
        }
        this.warrantyMalfunctionChart.setOption(option, true)
        this.warrantyMalfunctionChart.hideLoading()

        // this.warrantyMalfunctionChart.on('click', params => {
        //   console.log('params', params)
        //   this.modalTitle = '报修故障'
        //   this.modalTableColumns = [
        //     {
        //       title: '#',
        //       dataIndex: '',
        //       key: 'rowIndex',
        //       width: 60,
        //       align: 'center',
        //       customRender: function(t, r, index) {
        //         return parseInt(index) + 1
        //       }
        //     },
        //     {
        //       title: '类型',
        //       align: 'center',
        //       dataIndex: 'planCloseType'
        //     },
        //     {
        //       title: '时间类型',
        //       align: 'center',
        //       dataIndex: 'planCloseTimeType'
        //     },
        //     {
        //       title: '时长（分钟）',
        //       align: 'center',
        //       dataIndex: 'planCloseTimeLong'
        //     },
        //     {
        //       title: '备注',
        //       align: 'center',
        //       dataIndex: 'remark'
        //     }
        //   ]
        //   this.modalDataApiUrl = '/mdc/mdcPlanClose/list'
        //   this.modalVisible = true
        // })
      },

      /* 绘制车间保养滚动表 */
@@ -756,7 +843,7 @@
          evenRowBGC: '#295562',
          data: this.twoMaintenanceChartData,
          index: true,
          columnWidth: [100],
          columnWidth: [100, 300, 300, 300],
          align: ['center', 'center', 'center', 'center']
        }
      },
@@ -836,7 +923,7 @@
            interval: yAxisInterval,
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
              color: '#fff'
            },
            axisTick: {
              show: false
@@ -1083,6 +1170,48 @@
      },

      /**
       * 点击三保展示栏后打开弹窗
       * @param record 点击当前三保信息
       */
      openMaintenanceModal(record) {
        this.modalTitle = record.planTime
        this.modalTableColumns = [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '类型',
            align: 'center',
            dataIndex: 'planCloseType'
          },
          {
            title: '时间类型',
            align: 'center',
            dataIndex: 'planCloseTimeType'
          },
          {
            title: '时长（分钟）',
            align: 'center',
            dataIndex: 'planCloseTimeLong'
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark'
          }
        ]
        this.modalDataApiUrl = '/mdc/mdcPlanClose/list'
        // this.modalVisible = true
      },

      /**
       * 窗口尺寸变化时触发
       * 调整图表尺寸以适应分辨率
       */
@@ -1127,6 +1256,7 @@
            padding: 5px 20px;
            font-size: 20px;
            margin-bottom: 10px;
            cursor: pointer;

            .plan-value-container {
              display: flex;

 src/views/dashboard/WorkshopSectionSignage.vue

@@ -393,7 +393,7 @@
              center: ['50%', '50%'],
              color: [
                '#0FC61A',
                '#0DAF15',
                '#F56436',
                '#8B8B8B'
              ],
              label: {

 src/views/system/modules/SelectDeviceDrawer.vue

@@ -2,7 +2,7 @@
  <a-drawer
    :title="title"
    :visible="visible"
    width="650"
    width="500"
    @ok="handleOk"
    @close="handleCancel"
  >
@@ -10,10 +10,21 @@
    <a-spin :spinning="loading">
      <!-- showLine -->
      <a-form>
        <a-form-item>
          <a-input-search @search="handleSearch" style="width:100%;" placeholder="检索 类别编码/名称" allowClear
                          v-model="searchInput" @change="handleChange"/>
        </a-form-item>
        <a-form-item label="车间层级：">
          <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys"
          <a-tree showLine ref="tree" :expandedKeys.sync="expandedKeys" :autoExpandParent="autoExpandParent"
                  :treeData="treeDataSource" checkable @check="onCheck" v-model="checkedKeys"
                  @expand="onExpand">
            <template slot="title" slot-scope="{ title, parentId, entity, key}">
              <span v-if="title.indexOf(searchValue) > -1">{{ title.substr(0, title.indexOf(searchValue)) }}
                <span class="replaceSearch">{{ searchValue }}</span>
                {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
              </span>
              <span v-else>{{ title }}</span>
            </template>
          </a-tree>
        </a-form-item>
      </a-form>
@@ -78,11 +89,13 @@
    },
    data() {
      return {
        searchInput: '',
        cardLoading: false,
        loading: false,
        treeDataSource: [],
        expandedKeys: [],
        checkedKeys: [],
        autoExpandParent: true,
        url: {
          getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
        },
@@ -110,7 +123,7 @@
          if (res.success) {
            this.dataList = []
            this.allTreeKeys = []
            this.getTreeDataSouce(res.result)
            this.getTreeDataSource(res.result)
            this.treeDataSource = res.result
            this.generateList(this.treeDataSource)
            console.log('treeDataSource', this.treeDataSource)
@@ -140,10 +153,65 @@
        }
      },

      getTreeDataSouce(data) {
      handleChange() {
        let search = this.searchInput
        let expandedKeys = this.dataList
          .map(item => {
            if (item.title != null) {
              if (item.title.indexOf(search) > -1) {
                return this.getParentKey(item.key, this.treeDataSource)
              }
              return null
            }
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          searchValue: search,
          autoExpandParent: true
        })
      },

      handleSearch(value) {
        let search = value
        let expandedKeys = this.dataList
          .map(item => {

            if (item.title != null) {
              if (item.title.indexOf(search) > -1) {
                return this.getParentKey(item.key, this.treeDataSource)
              }
              return null
            }
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          searchValue: search,
          autoExpandParent: true
        })
      },

      getParentKey(key, tree) {
        let parentKey
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i]
          if (node.children) {
            if (node.children.some(item => item.key === key)) {
              parentKey = node.key
            } else if (
              this.getParentKey(key, node.children)) {
              parentKey = this.getParentKey(key, node.children)
            }
          }
        }
        return parentKey
      },

      getTreeDataSource(data) {
        data.forEach(item => {
          if (item.children && item.children.length > 0) {
            this.getTreeDataSouce(item.children)
            this.getTreeDataSource(item.children)
          }
          item.key = item.equipmentId ? item.equipmentId : item.key
          item.value = item.equipmentId ? item.equipmentId : item.value
@@ -176,39 +244,10 @@
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-modal {
    /*transform-origin: 337px 50px;*/
  }

  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  .replaceSearch {
    color: #40a9ff;
    font-weight: bold;
    background-color: rgb(204, 204, 204);
  }

  .drawer-bottom-button {