1、批次管理新增申城数控加工程序确认表功能并实现打印功能 2、调整批次管理新增/修改信息弹窗样式 3、删除设备监控页面异常反馈功能 4、车间看板详情弹...

zhaowei

2025-06-03 a251b673b7fdfec5eff1322d0a25d067f702b882

 src/views/mdc/base/modules/DeviceBaseInfo/EquipmentList.vue

@@ -3,80 +3,80 @@

    <!-- 查询区域 -->
    <!--<div class="table-page-search-wrapper">-->
      <!--<a-form layout="inline" @keyup.enter.native="searchQuery">-->
        <!--<a-row :gutter="24">-->
          <!--<a-col :md="7" :sm="7">-->
            <!--<a-form-item label="设备名称">-->
              <!--<a-input placeholder="输入设备名称查询" v-model="queryParam.equipmentName"></a-input>-->
            <!--</a-form-item>-->
          <!--</a-col>-->
          <!--<a-col :md="7" :sm="7">-->
            <!--<a-form-item label="状态">-->
              <!--<a-select v-model="queryParam.status" placeholder="请选择">-->
                <!--<a-select-option value="">请选择</a-select-option>-->
                <!--<a-select-option value="0">关机</a-select-option>-->
                <!--<a-select-option value="2">待机</a-select-option>-->
                <!--<a-select-option value="3">运行</a-select-option>-->
                <!--<a-select-option value="22">报警</a-select-option>-->
              <!--</a-select>-->
            <!--</a-form-item>-->
          <!--</a-col>-->
          <!--<a-col :md="3" :sm="3">-->
             <!--<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">-->
              <!--<a @click="handleToggleSearch" style="margin-left: 8px">-->
                <!--{{ toggleSearchStatus ? '收起' : '展开' }}-->
                <!--<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
              <!--</a>-->
            <!--</span>-->
          <!--</a-col>-->
        <!--</a-row>-->
        <!--<a-row :gutter="24">-->
          <!--<template v-if="toggleSearchStatus">-->
            <!--<a-col :md="12" :sm="12">-->
              <!--<a-form-item label="采集时间">-->
                <!--<a-range-picker @change="dateParamChange" v-model="dates"/>-->
              <!--</a-form-item>-->
            <!--</a-col>-->
          <!--</template>-->
    <!--<a-form layout="inline" @keyup.enter.native="searchQuery">-->
    <!--<a-row :gutter="24">-->
    <!--<a-col :md="7" :sm="7">-->
    <!--<a-form-item label="设备名称">-->
    <!--<a-input placeholder="输入设备名称查询" v-model="queryParam.equipmentName"></a-input>-->
    <!--</a-form-item>-->
    <!--</a-col>-->
    <!--<a-col :md="7" :sm="7">-->
    <!--<a-form-item label="状态">-->
    <!--<a-select v-model="queryParam.status" placeholder="请选择">-->
    <!--<a-select-option value="">请选择</a-select-option>-->
    <!--<a-select-option value="0">关机</a-select-option>-->
    <!--<a-select-option value="2">待机</a-select-option>-->
    <!--<a-select-option value="3">运行</a-select-option>-->
    <!--<a-select-option value="22">报警</a-select-option>-->
    <!--</a-select>-->
    <!--</a-form-item>-->
    <!--</a-col>-->
    <!--<a-col :md="3" :sm="3">-->
    <!--<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">-->
    <!--<a @click="handleToggleSearch" style="margin-left: 8px">-->
    <!--{{ toggleSearchStatus ? '收起' : '展开' }}-->
    <!--<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
    <!--</a>-->
    <!--</span>-->
    <!--</a-col>-->
    <!--</a-row>-->
    <!--<a-row :gutter="24">-->
    <!--<template v-if="toggleSearchStatus">-->
    <!--<a-col :md="12" :sm="12">-->
    <!--<a-form-item label="采集时间">-->
    <!--<a-range-picker @change="dateParamChange" v-model="dates"/>-->
    <!--</a-form-item>-->
    <!--</a-col>-->
    <!--</template>-->

        <!--</a-row>-->
      <!--</a-form>-->
    <!--</a-row>-->
    <!--</a-form>-->
    <!--</div>-->
    <!-- 操作按钮区域 -->
    <!--<div class="table-operator" style="border-top: 5px">-->
      <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
      <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
    <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
    <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
    <!--</div>-->

    <div class="equipmentList" id="DeviceList">
      <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
        <!--<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{-->
        <!--selectedRowKeys.length }}</a>项&nbsp;&nbsp;-->
        <!--<a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      <!--<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{-->
      <!--selectedRowKeys.length }}</a>项&nbsp;&nbsp;-->
      <!--<a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      <!--</div>-->

      <a-table ref="table" bordered size="middle" rowKey="equipmentId" :columns="columns" :dataSource="dataSource"
               :pagination="false" :loading="loading" :scroll="{x:'max-content',y:scrollY}">
        <template slot="equipmentId" slot-scope="text, record">
          <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>
        </template>
        <template slot="equipmentName" slot-scope="text, record">
          <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>
        </template>
        <template slot="oporationDict" slot-scope="text, record">
          <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>
        </template>
        <!--<template slot="equipmentId" slot-scope="text, record">-->
        <!--<div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>-->
        <!--</template>-->
        <!--<template slot="equipmentName" slot-scope="text, record">-->
        <!--<div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>-->
        <!--</template>-->
        <!--<template slot="oporationDict" slot-scope="text, record">-->
        <!--<div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>-->
        <!--</template>-->
        <template slot="equipmentStatus" slot-scope="text">
          <div :style="{color:text!==0?'#f00':null}">{{text===0?'正常':'异常'}}</div>
          <div>{{text===0?'正常':'异常'}}</div>
        </template>
        <template slot="collecttime" slot-scope="text, record">
          <div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-popconfirm title="确定反馈吗?" @confirm="$emit('editEquipmentStatus',record)" v-has="'deiveBaseInfo:responseStatus'">
            <a>状态反馈</a>
          </a-popconfirm>
        </template>
        <!--<template slot="collecttime" slot-scope="text, record">-->
        <!--<div :style="{color:record.equipmentStatus!==0?'#f00':null}">{{text}}</div>-->
        <!--</template>-->
        <!--<template slot="action" slot-scope="text, record">-->
        <!--<a-popconfirm title="确定反馈吗?" @confirm="$emit('editEquipmentStatus',record)" v-has="'deiveBaseInfo:responseStatus'">-->
        <!--<a>状态反馈</a>-->
        <!--</a-popconfirm>-->
        <!--</template>-->
      </a-table>

    </div>
@@ -88,112 +88,113 @@

  export default {
    name: 'EquipmentLayout',
    components: {   },
    components: {},
    data() {
      return {
        loading:false,
        url: {

        },
        loading: false,
        url: {},
        columns: [
          {
            title: '设备ID',
            align: "center",
            align: 'center',
            dataIndex: 'equipmentId',
            scopedSlots: {customRender: 'equipmentId'},
            width:210
            width: 210
          },
          {
            title: '设备名称',
            align: "center",
            align: 'center',
            dataIndex: 'equipmentName',
            scopedSlots: {customRender: 'equipmentName'},
            width:300
            width: 300
          },
          {
            title: '状态',
            align: "center",
            align: 'center',
            dataIndex: 'oporationDict',
            scopedSlots: {customRender: 'oporationDict'},
            width:200
            width: 200
          },
          {
            title: '设备异常',
            align: "center",
            align: 'center',
            dataIndex: 'equipmentStatus',
            scopedSlots: {customRender: 'equipmentStatus'},
            width:200
            scopedSlots: { customRender: 'equipmentStatus' },
            width: 200
          },
          {
            title: '采集时间',
            align: "center",
            align: 'center',
            dataIndex: 'collecttime',
            defaultSortOrder:'descend',
            sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1},
            scopedSlots: {customRender: 'collecttime'},
            width:350
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 150,
            fixed:'right'
            defaultSortOrder: 'descend',
            sorter: (a, b) => {
              return a.collecttime > b.collecttime ? 1 : -1
            },
            width: 350
          }
          // {
          //   title: '操作',
          //   dataIndex: 'action',
          //   scopedSlots: {customRender: 'action'},
          //   align: "center",
          //   width: 150,
          //   fixed:'right'
          // }
        ],
        scrollY:465,
        scrollY: 465
      }
    },
    props: { dataSource: {
    props: {
      dataSource: {
        type: Array,
        required: true,
        default: []
      } },
    watch: {
      }
    },
    watch: {},
    methods: {
      handleWindowResize(){
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
      handleWindowResize() {
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
        this.scrollY = boxHeight - tableHeadHeight
      },
      }
    },
    mounted(){
      window.addEventListener('resize',this.handleWindowResize)
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
    },
    }
  }
</script>
<style scoped>
  .equipmentList{
  .equipmentList {
    flex: 1;
    overflow: hidden;
  }

  @media screen and (min-width: 1920px){
    .equipmentList{
      height: 640px!important;
  @media screen and (min-width: 1920px) {
    .equipmentList {
      height: 640px !important;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .equipmentList{
      height: 640px!important;

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .equipmentList {
      height: 640px !important;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .equipmentList{
      height: 493px!important;

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .equipmentList {
      height: 493px !important;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .equipmentList{
      height: 493px!important;

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .equipmentList {
      height: 493px !important;
    }
  }
  @media screen and (max-width: 1280px){
    .equipmentList{
      height: 394px!important;

  @media screen and (max-width: 1280px) {
    .equipmentList {
      height: 394px !important;
    }
  }