1、调整导航栏为侧边模式时的项目标题 2、调整页面顶部栏颜色 3、解决设备报警页面由于缩放引起的组件遮挡文字问题 4、总控车间看板右侧图表调整为自动轮...

zhaowei

2024-10-12 f7cc97f27910c7d570f07df5d0dbd29d3f06049c

1、调整导航栏为侧边模式时的项目标题
2、调整页面顶部栏颜色
3、解决设备报警页面由于缩放引起的组件遮挡文字问题
4、总控车间看板右侧图表调整为自动轮播
5、分控车间看板每日生产计划仅展示3项，完整表格在右上角查看更多中查看

 src/components/page/GlobalHeader.vue

@@ -17,7 +17,7 @@
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="toggle"/>

      <span v-if="device === 'desktop'">欢迎进入 Jeecg-Boot ä¼ä¸šçº§ä½Žä»£ç å¹³å°</span>
      <span v-if="device === 'desktop'">中国一拖集团有限公司</span>
      <span v-else>Jeecg-Boot</span>

      <user-menu :theme="theme"/>
@@ -59,7 +59,7 @@
    components: {
      UserMenu,
      SMenu,
      Logo,
      Logo
    },
    mixins: [mixin],
    props: {
@@ -98,7 +98,7 @@
          headerIndexRight: {},
          topSmenuStyle: {}
        },
        chatStatus: '',
        chatStatus: ''
      }
    },
    watch: {
@@ -163,7 +163,7 @@
      // update-begin-author:sunjianlei date:20210508 for: ä¿®å¤åŠ¨æ€åŠŸèƒ½æµ‹è¯•èœå•ã€å¸¦å‚数菜单标题错误、展开错误的问题
      handleUpdateMenuTitle(value) {
        this.$emit('updateMenuTitle', value)
      },
      }
      // update-end-author:sunjianlei date:20210508 for: ä¿®å¤åŠ¨æ€åŠŸèƒ½æµ‹è¯•èœå•ã€å¸¦å‚数菜单标题错误、展开错误的问题

    }
@@ -223,5 +223,40 @@
  }

  /* update_end author:scott date:20190220 for: ç¼©å°é¦–页布局顶部的高度*/
  /deep/ .ant-menu {
    background-color: #E74C3C;
    color: #fff;
    .ant-menu-submenu {
      color: #fff;
    }
    .ant-menu-submenu:hover {
    }
    .ant-menu-submenu-title:hover {
      color: #fff;
      /*background-color: #F65B4B !important;*/
    }
    .ant-menu-submenu-open {
      /*background-color: #F65B4B !important;*/
    }
    .ant-menu-submenu-selected {
      color: #fff !important;
      /*background-color: #F65B4B !important;*/
    }
    .ant-menu-item {
      a {
        color: #fff;
        &:hover {
          color: #fff;
        }
      }

      &.ant-menu-item-active {
        /*background-color: #F65B4B;*/
      }

      &.ant-menu-item-selected {
        /*background-color: #F65B4B;*/
      }
    }
  }
</style>

 src/components/page/GlobalLayout.vue

@@ -451,6 +451,7 @@
        padding: 0 20px 0 0;
        display: flex;
        height: 59px;
        color: #fff;

        .ant-menu.ant-menu-horizontal {
          border: none;
@@ -498,7 +499,7 @@
      }

      &.light {
        background-color: #fff;
        background-color: #E74C3C;

        .header-index-wide {
          .header-index-left {

 src/components/tools/Logo.vue

@@ -7,7 +7,7 @@
      <img v-else src="~@/assets/logo-yt.jpg" alt="logo">
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->

      <h1 v-if="showTitle">{{ title }}</h1>
      <h1 v-if="showTitle" style="color: #fff">{{ title }}</h1>
    </router-link>
  </div>
</template>

 src/views/mdc/base/MasterControlWorkshopSignage.vue

@@ -136,6 +136,8 @@
        rightColChart2: '',
        rightColChart3: '',
        rightColChart2And3Data: '',
        rightColChart2CarouselTime: null,
        rightColChart3CarouselTime: null,
        rightColChart4: '',
        rightColChart4Data: '',
        rightColChart4CarouselTime: null
@@ -149,6 +151,8 @@
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
      if (this.rightColChart2CarouselTime) clearInterval(this.rightColChart2CarouselTime)
      if (this.rightColChart3CarouselTime) clearInterval(this.rightColChart3CarouselTime)
      if (this.rightColChart4CarouselTime) clearInterval(this.rightColChart4CarouselTime)
    },
    methods: {
@@ -1250,103 +1254,6 @@
        ]
        const xAxisData = []
        const seriesData = []
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.openRate })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
@@ -1435,6 +1342,105 @@
                      ]
                    )
                  ]

        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.openRate })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              interval: 0,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  return colorList[params.dataIndex]
                  // build a color map as your need.

@@ -1447,11 +1453,27 @@
                }
              }
            }
          ],
          dataZoom: [
            {
              show: false,
              startValue: 0, // ä»Žå¤´å¼€å§‹ã€‚
              endValue: 9 // ä¸€æ¬¡æ€§å±•ç¤ºå‡ ä¸ª
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.rightColChart2.setOption(option, true)

        this.rightColChart2CarouselTime = setInterval(() => {
          xAxisData.push(xAxisData.shift())
          seriesData.push(seriesData.shift())
          colorList.push(colorList.shift())
          this.$nextTick(() => {
            this.rightColChart2.setOption(option, true)
          })
        }, 3000)
      },

      /* ç»˜åˆ¶å³ä¾§ç¬¬ä¸‰ä¸ªå›¾è¡¨ */
@@ -1530,104 +1552,6 @@
        ]
        const xAxisData = []
        const seriesData = []
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.utilizationRate })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },

          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  const colorList = [
                    new echarts.graphic.LinearGradient(
                      0, 0, 1, 0,
@@ -1716,6 +1640,104 @@
                      ]
                    )
                  ]
        this.rightColChart2And3Data.forEach(item => {
          xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
          seriesData.push({ value: item.utilizationRate })
        })
        const option = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: params => `${params.name}：${params.value}%`
          },
          legend: {
            show: false,
            data: [],
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {    //图例文字的样式
              //fontSize:14,
              color: '#fff'
            }
          },
          grid: {
            left: '1%',
            right: '5%',
            bottom: '1%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              // rotate: 45,
              interval: 0,
              margin: 15,
              fontSize: '55%',
              formatter(value) {
                const data = xAxisData
                const index = data.indexOf(value)
                if (index % 2 == 0) {
                  return `\n` + value
                } else {
                  return value
                }
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value',
            data: [],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: '70%'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '利用率',
              type: 'bar',
              barWidth: '50%',//柱图宽度
              data: [],
              label: {
                show: true,
                position: 'inside',
                padding: [3, 5],
                fontSize: '60%',
                color: '#fff',
                formatter: '{c}',
                backgroundColor: 'inherit',
                shadowColor: '#153e04',
                shadowBlur: 5,
                shadowOffsetX: 3,
                shadowOffsetY: 5,
                borderRadius: 15
              },
              //barCategoryGap:'180%',
              itemStyle: {
                barBorderRadius: '',
                color: function(params) {
                  return colorList[params.dataIndex]
                  // build a color map as your need.

@@ -1728,11 +1750,27 @@
                }
              }
            }
          ],
          dataZoom: [
            {
              show: false,
              startValue: 0, // ä»Žå¤´å¼€å§‹ã€‚
              endValue: 9 // ä¸€æ¬¡æ€§å±•ç¤ºå‡ ä¸ª
            }
          ]
        }
        option.xAxis.data = xAxisData
        option.series[0].data = seriesData
        this.rightColChart3.setOption(option, true)

        this.rightColChart3CarouselTime = setInterval(() => {
          xAxisData.push(xAxisData.shift())
          seriesData.push(seriesData.shift())
          colorList.push(colorList.shift())
          this.$nextTick(() => {
            this.rightColChart3.setOption(option, true)
          })
        }, 3000)
      },

      /* ç»˜åˆ¶å³ä¾§ç¬¬å››ä¸ªå›¾è¡¨ */

 src/views/mdc/base/SubControlWorkshopSignage.vue

@@ -6,6 +6,10 @@
      <div>{{currentProductionInfo.productionName}}</div>
    </div>

    <div class="load-more">
      <div @click="modalVisible=true">点击查看更多>></div>
    </div>

    <table class="plan-table">
      <thead>
      <tr style="position: relative">
@@ -36,6 +40,7 @@

      <tbody>
      <tr v-for="(item,index) in todayProductionPlanList" :key="index">
        <template v-if="index<3">
        <td colspan="2">{{item.equipmentId}}</td>
        <td colspan="2">{{item.equipmentName}}</td>
        <a-tooltip :destroyTooltipOnHide="true" placement="topRight" @mouseenter="mouseEnterItem">
@@ -52,6 +57,7 @@
        <td colspan="2">{{item.processRoute}}</td>
        <td colspan="2">{{item.orderId}}</td>
        <td>{{item.clazz}}</td>
        </template>
      </tr>
      </tbody>
    </table>
@@ -121,16 +127,20 @@
        </div>
      </div>
    </div>

    <SignageModal :todayProductionPlanList="todayProductionPlanList" :modalVisible="modalVisible"
                  @closeModal="modalVisible=false"/>
  </div>
</template>

<script>
  import moment from 'moment'
  import api from '@/api/mdc'
  import SignageModal from './modules/SubControlWorkshopSignage/SignageModal'

  export default {
    name: 'SubControlWorkshopSignage',
    components: {},
    components: { SignageModal },
    data() {
      return {
        currentProductionInfo: {
@@ -352,7 +362,8 @@
          brandList: [],
          lifeList: []
        },
        maxBrandToolLifeListLength: null
        maxBrandToolLifeListLength: null,
        modalVisible: false
      }
    },
    created() {
@@ -384,12 +395,18 @@
            if (res.success) this.todayProductionPlanList = res.result
          })
      },

      clickToLoadMore() {

      },

      getEquipmentStatusByApi() {
        api.getEquipmentStatusApi(this.currentProductionInfo.productionId)
          .then(res => {
            if (res.success) this.equipmentStatusList = res.result
          })
      },

      getToolLifeListByApi() {
        api.getToolLifeListApi(this.currentProductionInfo.productionId)
          .then(res => {
@@ -414,6 +431,7 @@
            }
          })
      },

      getToolCurrentLifeDataBgColor(record) {
        if (record.currentLife / record.ratedLife > 0.8) {
          return '#FF9A10'
@@ -462,6 +480,20 @@
      font-size: 2.5vw;
    }

    .load-more {
      display: flex;
      justify-content: flex-end;
      -webkit-justify-content: flex-end;
      font-size: 1vw;

      div {
        background-color: #83BF31;
        margin: 0 0.5% 0.5% 0;
        padding: 0 0.3%;
        cursor: pointer;
      }
    }

    table {
      td {
        border: 0.1vw solid #fff;

 src/views/mdc/base/modules/EquipmentAlarmNumberRetrieval/EquipmentAlarmNumberRetrievalList.vue

@@ -269,4 +269,9 @@
  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }

  /deep/ .ant-col .ant-form-item-control-wrapper .ant-form-item-control .ant-form-item-children .ant-calendar-picker {
    width: 100%;
    min-width: 0 !important;
  }
</style>

 src/views/mdc/base/modules/EquipmentAlarmRetrieval/EquipmentAlarmRetrievalList.vue

@@ -263,5 +263,10 @@

  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }

  /deep/ .ant-col .ant-form-item-control-wrapper .ant-form-item-control .ant-form-item-children .ant-calendar-picker {
    width: 100%;
    min-width: 0 !important;
  }
</style>

 src/views/mdc/base/modules/EquipmentAlarmSort/EquipmentAlarmSortList.vue

@@ -266,4 +266,9 @@
  .ant-table-striped /deep/ .table-striped td {
    background-color: #fafafa;
  }

  /deep/ .ant-col .ant-form-item-control-wrapper .ant-form-item-control .ant-form-item-children .ant-calendar-picker {
    width: 100%;
    min-width: 0 !important;
  }
</style>

 src/views/mdc/base/modules/SubControlWorkshopSignage/SignageModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,210 @@
<template>
  <a-modal title="当日生产计划" :width="modalWidth" :visible="modalVisible" :footer="null" @cancel="$emit('closeModal')">
    <a-table :columns="modalTableColumns" :dataSource="todayProductionPlanList" :pagination="false" :loading="loading" rowKey="equipmentId"></a-table>
  </a-modal>
</template>

<script>
  export default {
    name: 'SignageModal',
    components: {},
    props: {
      modalWidth: {
        type: Number,
        default: 1448
      },
      todayProductionPlanList: {
        type: Object
      },
      modalVisible: {
        type: Boolean
      }
    },
    data() {
      return {
        dataSource: [],
        modalTableColumns: [
          // {
          //   title: '#',
          //   dataIndex: '',
          //   key: 'rowIndex',
          //   width: 60,
          //   align: 'center',
          //   customRender: function(t, r, index) {
          //     return parseInt(index) + 1
          //   }
          // },
          {
            width: 100,
            align: 'center',
            title: '机床ID',
            dataIndex: 'equipmentId',
            key: 'equipmentId'
          },
          {
            width: 100,
            align: 'center',
            title: '机床名称',
            dataIndex: 'equipmentName',
            key: 'equipmentName'
          },
          {
            width: 160,
            align: 'center',
            title: '零件号',
            dataIndex: 'productNo',
            key: 'productNo'
          },
          {
            width: 100,
            align: 'center',
            title: '零件名称',
            key: 'productName',
            dataIndex: 'productName'
          },
          {
            width: 75,
            align: 'center',
            title: '计划量',
            key: 'planCount',
            dataIndex: 'planCount'
          },
          {
            width: 75,
            align: 'center',
            title: '完成量',
            key: 'completionCount',
            dataIndex: 'completionCount'
          },
          {
            width: 75,
            align: 'center',
            title: '合格量',
            key: 'qualifiedCount',
            dataIndex: 'qualifiedCount'
          },
          {
            width: 75,
            align: 'center',
            title: '合格率',
            key: 'passRate',
            dataIndex: 'passRate'
          },
          {
            width: 100,
            align: 'center',
            title: '工序号',
            key: 'processRoute',
            dataIndex: 'processRoute'
          },
          {
            width: 120,
            align: 'center',
            title: '工单号',
            key: 'orderId',
            dataIndex: 'orderId'
          },
          {
            width: 100,
            align: 'center',
            title: '班组',
            key: 'clazz',
            dataIndex: 'clazz'
          }
        ]
      }
    },
    methods: {}
  }
</script>

<style scoped>
  /deep/ .ant-modal-content {
    background-color: #000;
  }

  /deep/ .ant-modal-header {
    background-color: #000;
  }

  /deep/ .ant-modal-title {
    color: #fff;
  }

  /deep/ .ant-modal-close {
    color: #fff;
  }

  /deep/ .ant-input {
    color: #fff;
    background-color: #000;
  }

  /deep/ .ant-form-item-label label {
    color: #fff;
  }

  /deep/ .ant-table-thead th {
    background-color: #5C5C5C;
    color: #fff;
  }

  /deep/ .ant-table-tbody td {
    background-color: #262626;
    color: #fff;
  }

  /deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: #7E7E7E;
  }

  /deep/ .ant-table-placeholder {
    background-color: #000;
  }

  /deep/ .ant-table-placeholder .ant-empty-description {
    color: #fff;
  }

  /deep/ .ant-pagination-item a {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-pagination-item-link {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-pagination-item-link:hover {
    color: #1890FF;
    border-color: #1890FF;
  }

  /deep/ .ant-pagination-item-active {
    background-color: #000;
  }

  /deep/ .ant-select-selection--single {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-pagination-options-quick-jumper {
    color: #fff;
  }

  /deep/ .ant-pagination-options-quick-jumper input {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-select-dropdown-menu-item {
    background-color: #000;
    color: #fff;
  }

  /deep/ .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: #1890FF;
  }
</style>