设备管理首页按照需求进行样式开发

zhaowei

2 天以前 d78dad29ee493b68dd6ac2e34df08431685c3734

设备管理首页按照需求进行样式开发

 src/api/signage.js

@@ -1,6 +1,7 @@
import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'

export default {
  /* MDC */
  // èŽ·å–所有车间信息
  getAllWorkShop: id => getAction('/mdc/home/getAllWorkShop', {}),
  // æ ¹æ®ç”¨æˆ·ID获取用户信息
@@ -15,4 +16,14 @@
  getEquipmentOEEStatistics: productionId => getAction('/mdc/home/equipmentOEEStatistics', { productionId }),
  // è®¾å¤‡OEE和利用率对比
  getEquipmentMonthStatisticsApi: productionId => getAction('/mdc/home/equipmentMonthStatistics', { productionId }),

  /* EAM */
  // æŠ€æœ¯çŠ¶æ€
  getEquipmentTechnologyStatusApi: () => getAction('/equipment/home/getEquipmentTechnologyStatusList'),
  // æ•…障报修
  getReportRepairEquipmentApi: () => getAction('/equipment/home/getReportRepairEquipmentList'),
  // ä¸‰ä¿è®¡åˆ’
  getThirdMaintenancePlanApi: () => getAction('/equipment/home/getThirdGuaranteesPlan'),
  // äºŒä¿è®¡åˆ’
  getSecondMaintenancePlanApi: () => getAction('/equipment/home/getSecondGuaranteesPlan')
}

 src/views/dashboard/Analysis.vue

@@ -3,10 +3,9 @@
             :userType="userType"
             :productionCode="productionCode"
             :workshopSectionProductionCode="workshopSectionProductionCode"
             v-if="[1,2,3,4].includes(userType)"
             >
             v-if="userType&&userType!==0">
  </Component>
  <div v-else>  <!-- ä¸Žç»„件渲染互斥 -->
  <div v-else-if="userType===0">  <!-- ä¸Žç»„件渲染互斥 -->
    <img src="@/assets/index.png" style="width: 100%;height: 785px">
  </div>
</template>
@@ -15,12 +14,14 @@
  import signageApi from '@/api/signage'
  import MdcManagerSignage from './mdcIndex/MdcManagerSignage.vue'
  import DncManagerSignage from './dncIndex/DncManagerSignage.vue'
  import EamManagerSignage from './eamIndex/EamManagerSignage.vue'

  export default {
    name: "Analysis",
    name: 'Analysis',
    components: {
      MdcManagerSignage,
      DncManagerSignage
      DncManagerSignage,
      EamManagerSignage
    },
    data() {
      return {
@@ -28,7 +29,7 @@
        productionCode: '',
        branchFactoryProductionCode: '',
        workshopSectionProductionCode: '',
        userType: '',
        userType: ''
      }
    },
    created() {
@@ -61,10 +62,10 @@
                //dnc
                this.currentSignage = 'DncManagerSignage'
                break
              // case 4:
              //   //设备管理
              //   this.currentSignage = 'IndexSignage'
              //   break
              case 4:
                //设备管理
                this.currentSignage = 'EamManagerSignage'
                break
              default:
                this.currentSignage = ''
                break

 src/views/dashboard/TodoList.vue

@@ -1,24 +1,12 @@
<template>
  <div>
    <a-spin :spinning="loading">
      <div class="todo-container">
        <el-dropdown
          v-for="(item, index) in todoList"
          :key="index"
          class="todo-item"
          @click.native="handelDetail(item)"
        >
          <span class="todo-title" >{{ item.description }}</span>
<!--          <el-dropdown-menu slot="dropdown">-->
<!--            <el-dropdown-item @click.native="handelDetail(item)">执行/审批</el-dropdown-item>-->
<!--          </el-dropdown-menu>-->
          <div class="todo-info">
            <div class="todo-node">{{ item.name }}</div>
            <div class="todo-time">{{ item.createTime }}</div>
          </div>
        </el-dropdown>
      </div>
    </a-spin>
  <a-list :dataSource="todoList" :loading="loading" class="list-container">
    <a-list-item slot="renderItem" slot-scope="item,index" style="cursor: pointer"
                 @click.native="handelDetail(item)">
      <a-list-item-meta :description="item.description">
        <span slot="title" style="font-weight: bold">{{item.category_dictText}}</span>
      </a-list-item-meta>
      <div style="text-align: right">{{item.name}}<br/>{{item.createTime}}</div>
    </a-list-item>

    <AssignFileStreamHandle
      ref='modalFormApproval'
@@ -136,7 +124,7 @@
      :selectShenpiData='selectEquipmentSealUpData'
      @searchReset='searchReset'
    ></AssignEquipmentFileStreamHandle>
  </div>
  </a-list>
</template>

<script>
@@ -158,7 +146,8 @@
import EquipmentReturnApprovalModal from '@views/flowable/workflow/leanOut/EquipmentReturnApprovalModal.vue'
import SecondMaintenanceApprovalModal
  from '@views/flowable/workflow/secondMaintenance/SecondMaintenanceApprovalModal.vue'
import ThirdMaintenanceApprovalModal from '@views/flowable/workflow/thirdMaintenance/ThirdMaintenanceApprovalModal.vue'
  import ThirdMaintenanceApprovalModal
    from '@views/flowable/workflow/thirdMaintenance/ThirdMaintenanceApprovalModal.vue'
import OutBoundOrderHandle from '@views/flowable/workflow/outBoundOrder/OutBoundOrderHandle.vue'
import EquipmentSealUpApprovalModal from '@views/flowable/workflow/sealUp/EquipmentSealUpApprovalModal.vue'
import InboundOrderHandle from '@views/flowable/workflow/inboundOrder/InboundOrderHandle.vue'
@@ -172,7 +161,7 @@
import { getAction } from '@api/manage'

export default {
  name: "TodoList",
    name: 'TodoList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    lossBoundHandle,
@@ -235,7 +224,7 @@
      dataId: undefined,
      loading: false,
      disableMixinCreated: true
    };
      }
  },

  computed: {
@@ -249,20 +238,14 @@

  methods: {
    loadData(arg) {

      this.todoList = []

      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
        this.ipagination.page = 1
        this.ipagination.pageSize = 50
      }
      this.queryParam.categoryList = this.defaultCategories;
        this.queryParam.categoryList = this.defaultCategories
      // å°è£…查询条件
      let formData = {
        pageNo: arg,
@@ -290,10 +273,7 @@
      })
    },

    handelDetail(item, index) {
      console.log('点击了详情')
      console.log('item----->', item)
      console.log('index----->', index)
      handelDetail(item) {
      let processType = this.splitAprocessType(item.category)
      console.log('processType--->', processType)
      switch (processType) {
@@ -579,64 +559,13 @@
      this.$refs.assignEquipmentFileStreamHandle.getAllApproveData(item)
    }
  }
};
  }
</script>
<style scoped>
.todo-container {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  /* æ–°å¢žï¼šè®¾ç½®å®¹å™¨æœ€å¤§é«˜åº¦ï¼ˆå¯æ ¹æ®é¡µé¢å¸ƒå±€è°ƒæ•´ï¼Œå¦‚500px/80vh） */
  max-height: 100vh;
  /* æ–°å¢žï¼šåž‚直方向溢出时显示滚动条，水平方向溢出隐藏（避免布局错乱） */
  overflow-y: auto;
  overflow-x: hidden;
  /* å¯é€‰ï¼šæ·»åŠ æ»šåŠ¨æ¡æ ·å¼ä¼˜åŒ–（适配Chrome/Safari，可选） */
  &::-webkit-scrollbar {
    width: 6px; /* æ»šåŠ¨æ¡å®½åº¦ */
<style scoped lang="less">
  .list-container {
    height: 100%;
    /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container {
      height: 100%;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #e5e7eb; /* æ»šåŠ¨æ¡æ»‘块颜色 */
    border-radius: 3px; /* æ»šåŠ¨æ¡åœ†è§’ */
  }
  &::-webkit-scrollbar-track {
    background-color: #f9fafb; /* æ»šåŠ¨æ¡è½¨é“颜色 */
  }
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  position: relative;
  min-width: 300px;
  box-sizing: border-box;
  cursor: pointer;
}
.todo-title {
  flex: 1;
  margin-right: 100px;
  font-size: 14px;

}
.todo-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 120px;
  font-size: 12px;
}
.todo-node {
  margin-bottom: 5px;
  white-space: nowrap;
}
.el-dropdown {
  width: 100%;
}
.el-dropdown-menu {
  min-width: 200px;
  align-items: center;
}
</style>

 src/views/dashboard/dncIndex/DncManagerSignage.vue

@@ -77,7 +77,7 @@
}
.home-container {
  display: flex;
  min-height: 100vh;
  height: 100vh;
  padding: 5px;
  box-sizing: border-box;
  gap: 16px;

 src/views/dashboard/eamIndex/EamManagerSignage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,435 @@
<template>
  <div class="outer-container">
    <div class="left-container">
      <a-card title="技术状态">
        <a-spin class="spinning-container" :spinning="spinning1">
          <div id="tech_condition_chart" style="width:100%;height: 100%;"></div>
        </a-spin>
      </a-card>

      <a-card title="设备报修故障">
        <a-spin class="spinning-container" :spinning="spinning2">
          <div id="warranty_malfunction_chart" style="width:100%;height: 100%;"></div>
        </a-spin>
      </a-card>
    </div>


    <div class="right-container">
      <div class="right-top-container">
        <a-card title="三保计划">
          <div class="support-plan-container">
            <div v-for="(item,index) in maintenanceEleList" :key="index" class="support-plan-item">
              <div>{{item.planTime}}</div>
              <div class="plan-value-container">
                <div class="plan-value">{{$data.thirdMaintenanceParams[item.planValueLabel]}}</div>
                <div>台</div>
              </div>
            </div>
          </div>
        </a-card>
        <a-card title="二保计划">
          <div class="support-plan-container">
            <div v-for="(item,index) in maintenanceEleList" :key="index" class="support-plan-item">
              <div>{{item.planTime}}</div>
              <div class="plan-value-container">
                <div class="plan-value">{{$data.secondMaintenanceParams[item.planValueLabel]}}</div>
                <div>台</div>
              </div>
            </div>
          </div>
        </a-card>
      </div>

      <a-card title="我的待办" class="right-bottom-container">
        <a slot="extra" href="#" @click="$router.push('/flowable/workflow/FlowTodo')">更多</a>

        <todo-list ref="todoList"
                   :defaultCategories="['equipment_transfer','equipment_scrap','spare_part_apply','equipment_seal_up','equipment_unseal','equipment_return','sbdjApproval','eam_repair','equipment_lean_out','second_maintenance','third_maintenance']"
        />
      </a-card>
    </div>
  </div>
</template>

<script>
  import TodoList from '../TodoList'
  import signageApi from '@/api/signage'

  export default {
    name: 'EamManagerSignage',
    components: { TodoList },
    data() {
      return {
        spinning1: false,
        spinning2: false,
        techConditionChart: '',
        warrantyMalfunctionChart: '',
        thirdMaintenanceParams: {
          thisMonthMaintenancePlanNum: 0,
          thisMonthMaintenanceRealNum: 0,
          nextMonthMaintenancePlanNum: 0,
          maintenanceOverdueNum: 0
        },
        secondMaintenanceParams: {
          thisMonthMaintenancePlanNum: 0,
          thisMonthMaintenanceRealNum: 0,
          nextMonthMaintenancePlanNum: 0,
          maintenanceOverdueNum: 0
        },
        maintenanceEleList: [
          {
            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: ''
          }
        ]
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.getChartDataByApi()
      this.$refs.todoList.loadData(1)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    methods: {
      /* è°ƒç”¨æŽ¥å£èŽ·å–图表数据汇总方法 */
      getChartDataByApi() {
        this.getTechConditionDataByApi()
        this.getWarrantyMalfunctionDataByApi()
        this.getThirdMaintenanceConditionByApi()
        this.getSecondMaintenanceConditionByApi()
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–技术状态 */
      getTechConditionDataByApi() {
        this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
        this.spinning1 = true
        signageApi.getEquipmentTechnologyStatusApi()
          .then(res => {
            if (res.success && res.result) {
              this.techConditionData = [
                {
                  value: res.result.length > 0 ? res.result[0].qualifiedCount : 0,
                  name: '合格'
                },
                {
                  value: res.result.length > 0 ? res.result[0].limitedUseCount : 0,
                  name: '限用'
                },
                {
                  value: res.result.length > 0 ? res.result[0].disabledCount : 0,
                  name: '禁用'
                }
              ]
              this.drawTechConditionChart()
            }
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–故障报修 */
      getWarrantyMalfunctionDataByApi() {
        this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
        this.spinning2 = true
        signageApi.getReportRepairEquipmentApi()
          .then(res => {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                {
                  value: res.result.length > 0 ? res.result[0].noStopCount : 0,
                  name: '运行'
                },
                {
                  value: res.result.length > 0 ? res.result[0].failurTotalCount : 0,
                  name: '报修'
                },
                {
                  value: res.result.length > 0 ? res.result[0].stopCount : 0,
                  name: '停机'
                }
              ]
              this.drawWarrantyMalfunctionChart()
            }
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–三保情况 */
      getThirdMaintenanceConditionByApi() {
        signageApi.getThirdMaintenancePlanApi()
          .then(res => {
            if (res.success && res.result) {
              this.thirdMaintenanceParams.thisMonthMaintenancePlanNum = res.result.thisMonthCount
              this.thirdMaintenanceParams.thisMonthMaintenanceRealNum = res.result.thisMonthFinishCount
              this.thirdMaintenanceParams.nextMonthMaintenancePlanNum = res.result.nextMonthCount
              this.thirdMaintenanceParams.maintenanceOverdueNum = res.result.thisMonthOverdueCount
            }
          })
      },

      /* è°ƒç”¨æŽ¥å£èŽ·å–二保情况 */
      getSecondMaintenanceConditionByApi() {
        signageApi.getSecondMaintenancePlanApi()
          .then(res => {
            if (res.success && res.result) {
              this.secondMaintenanceParams.thisMonthMaintenancePlanNum = res.result.thisMonthCount
              this.secondMaintenanceParams.thisMonthMaintenanceRealNum = res.result.thisMonthFinishCount
              this.secondMaintenanceParams.nextMonthMaintenancePlanNum = res.result.nextMonthCount
              this.secondMaintenanceParams.maintenanceOverdueNum = res.result.thisMonthOverdueCount
            }
          })
      },

      /* ç»˜åˆ¶æŠ€æœ¯çŠ¶æ€é¥¼å›¾ */
      drawTechConditionChart() {
        const option = {
          tooltip: {
            trigger: 'item',
            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.value}（${params.percent}%）`
            }
          },
          legend: {
            bottom: 0,
            right: 'center',
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              fontSize: 14
            },
            data: ['合格', '限用', '禁用']
          },
          grid: {
            containLabel: true
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '55%'],
              center: ['50%', '40%'],
              color: [
                '#4DC794',
                '#3DB1F6',
                '#F76E6D'
              ],
              label: {
                position: 'outside',
                show: true,
                color: 'inherit',
                fontSize: 16,
                formatter: function(params) {
                  if (params.name !== '') {
                    return `${params.name}:${params.value}`
                  }
                }
              },
              labelLine: {
                show: true,
                length2: 15,
                length: 15,
                lineStyle: {
                  color: 'rgba(0,0,0,.45)'
                }
              },
              data: this.techConditionData
            }
          ]
        }
        this.techConditionChart.setOption(option, true)
        this.spinning1 = false
      },

      /* ç»˜åˆ¶è®¾å¤‡æŠ¥ä¿®æ•…障饼图 */
      drawWarrantyMalfunctionChart() {
        const option = {
          tooltip: {
            trigger: 'item',
            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.value}（${params.percent}%）`
            }
          },
          legend: {
            bottom: 0,
            right: 'center',
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              fontSize: 14
            },
            data: ['运行', '报修', '停机']
          },
          grid: {
            containLabel: true
          },
          series: {
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '40%'],
            color: [
              '#4DC794',
              '#3DB1F6',
              '#F76E6D'
            ],
            label: {
              position: 'outside',
              show: true,
              color: 'inherit',
              fontSize: 16,
              formatter: function(params) {
                if (params.name !== '') {
                  return `${params.name}:${params.value}`
                }
              }
            },
            labelLine: {
              show: true,
              length2: 15,
              length: 15
            },
            data: this.warrantyMalfunctionData
          }
        }
        this.warrantyMalfunctionChart.setOption(option, true)
        this.spinning2 = false
      },

      /**
       * çª—口尺寸变化时触发
       * è°ƒæ•´å›¾è¡¨å°ºå¯¸ä»¥é€‚应分辨率
       */
      handleWindowResize() {
        if (this.techConditionChart) this.techConditionChart.resize()
        if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
      }
    }
  }
</script>

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

  .outer-container {
    display: flex;
    justify-content: space-between;
    height: 100vh;

    .left-container {
      width: 30%;
      height: 100%;
      margin-right: @container-margin;

      & > div:first-child {
        margin-bottom: @container-margin;
      }

      /deep/ .ant-card {
        height: calc(100% / 2 - (@container-margin / 2));
        display: flex;
        flex-direction: column;

        .ant-card-body {
          flex: 1;
        }
      }
    }

    .right-container {
      width: 70%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .right-top-container {
        display: flex;
        margin-bottom: @container-margin;

        /deep/ .ant-card {
          flex: 1;

          &:first-child {
            margin-right: @container-margin;
          }
          .ant-card-body {
            padding: 0;
          }
        }

        .support-plan-container {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;

          .support-plan-item {
            border-radius: 3px;
            width: calc(100% / 2);
            padding: 25px;
            text-align: center;
            border-left: 1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e8;

            .plan-value-container {
              margin-top: 5px;
              display: flex;
              justify-content: center;
              align-items: center;

              .plan-value {
                margin-right: 10px;
                font-size: 30px;
              }
            }
          }
        }
      }

      .right-bottom-container {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        & ::-webkit-scrollbar {
          width: 6px; /* æ»šåŠ¨æ¡å®½åº¦ */
        }

        /deep/ .ant-card-body {
          padding: 6px 24px 12px;
          flex: 1;
          overflow: auto;
        }
      }
    }
  }

  .spinning-container {
    height: 100%;
    /deep/ .ant-spin-container {
      height: 100%;
    }
  }
</style>