1、登录页实现登录窗口响应式布局，同时限制最大最小宽高 2、除设备级看板其余看板中点击技术状态以及报修故障图表后打开对应弹窗，并实现与接口联动 3、设...

zhuzhuanzhuan

2024-05-31 bb654cea7b1666d5b3c04dbd81a074a5a502cc67

1、登录页实现登录窗口响应式布局，同时限制最大最小宽高
2、除设备级看板其余看板中点击技术状态以及报修故障图表后打开对应弹窗，并实现与接口联动
3、设备级看板点击保养计划按钮后打开对应弹窗并实现与后端数据联调
4、优化设备级看板折线图样式，将Y轴移至左侧，删除右侧Y轴，设置数据值在图标上的显示

 src/api/signage.js

@@ -48,5 +48,21 @@
  // 设备级设备信息和维护信息
  getEquipmentInfoApi: equipmentNum => getAction('/eam/calibrationOrder/getAreaEquipmentList', { equipmentNum }),
  // 根据不同类型获取仪表盘对应颜色区间
  getGaugeColorByTypeApi: type => getAction('/mdc/MdcUtilizationRate/getSectionByType', { type })
  getGaugeColorByTypeApi: type => getAction('/mdc/MdcUtilizationRate/getSectionByType', { type }),
  // 点击技术状态获取弹框明细
  getEquipmentTechnologyStatusDetailsListApi: params => getAction('/eam/calibrationOrder/showEquipmentByTechnologyStatus', { params }),
  // 点击报修获取弹框明细
  getReportRepairEquipmentDetailsListApi: params => getAction('/eam/calibrationOrder/showEquipmentByReportRepair', { params }),
  // 点击本月三保获取弹窗明细
  getThisMonthMaintenanceDetailsListApi: params => getAction('/eam/calibrationOrder/showThisMonthMaintenanceList', { params }),
  // 点击下月三保获取弹窗明细
  getNextMonthMaintenanceDetailsListApi: params => getAction('/eam/calibrationOrder/showNextMonthMaintenanceList', { params }),
  // 点击下下月三保获取弹窗明细
  getNextNextThisMonthMaintenanceDetailsListApi: params => getAction('/eam/calibrationOrder/showNextNextMonthMaintenanceList', { params }),
  // 点击本月完成三保获取弹窗明细
  getThisMonthMaintenanceFinishDetailsListApi: params => getAction('/eam/calibrationOrder/showThisMonthMaintenanceFinishList', { params }),
  // 点击延期获取弹窗明细
  getMaintenanceExtensionDetailsListApi: params => getAction('/eam/calibrationOrder/show3MaintenancePostponeList', { params }),
  // 点击本月完成三保获取弹窗明细
  getMaintenanceOverdueDetailsListApi: params => getAction('/eam/calibrationOrder/show3MaintenanceOverdueList', { params }),
}

 src/components/layouts/UserLayout.vue

@@ -2,24 +2,24 @@
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div class="container">
      <!--<div class="top">-->
        <!--<div class="header">-->
          <!--<a href="/">-->
            <!--<img src="~@/assets/lxzn_white.png" class="logo" alt="logo">-->
            <!--<span class="title">MDC智慧车间</span>-->
          <!--</a>-->
        <!--</div>-->
        <!--&lt;!&ndash;<div class="desc">&ndash;&gt;-->
          <!--&lt;!&ndash;Jeecg Boot 是中国最具影响力的 企业级 低代码平台&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--<div class="header">-->
      <!--<a href="/">-->
      <!--<img src="~@/assets/lxzn_white.png" class="logo" alt="logo">-->
      <!--<span class="title">MDC智慧车间</span>-->
      <!--</a>-->
      <!--</div>-->
      <!--&lt;!&ndash;<div class="desc">&ndash;&gt;-->
      <!--&lt;!&ndash;Jeecg Boot 是中国最具影响力的 企业级 低代码平台&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--</div>-->

      <route-view></route-view>

      <div class="footer">
        <!--<div class="links">-->
          <!--<a href="http://doc.jeecg.com" target="_blank">帮助</a>-->
          <!--<a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a>-->
          <!--<a href="https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE" target="_blank">条款</a>-->
        <!--<a href="http://doc.jeecg.com" target="_blank">帮助</a>-->
        <!--<a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a>-->
        <!--<a href="https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE" target="_blank">条款</a>-->
        <!--</div>-->
        <div class="copyright">
          <!--Copyright &copy; 2019 <a href="http://www.jeecg.com" target="_blank">JEECG开源社区</a> 出品-->
@@ -31,22 +31,22 @@
</template>

<script>
  import RouteView from "@/components/layouts/RouteView"
  import RouteView from '@/components/layouts/RouteView'
  import { mixinDevice } from '@/utils/mixin.js'

  export default {
    name: "UserLayout",
    name: 'UserLayout',
    components: { RouteView },
    mixins: [mixinDevice],
    data () {
    data() {
      return {}
    },
    mounted () {
    mounted() {
      document.body.classList.add('userLayout')
    },
    beforeDestroy () {
    beforeDestroy() {
      document.body.classList.remove('userLayout')
    },
    }
  }
</script>

@@ -70,9 +70,6 @@
      background-size: 100%;
      /*padding: 110px 0 144px;*/
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      a {
        text-decoration: none;
@@ -83,7 +80,6 @@
        position: absolute;
        top: 50px;
        left: 50px;


        .header {
          height: 44px;
@@ -125,8 +121,16 @@

      .main {
        background-color: #fff;
        width: 1100px;
        width: 57%;
        max-width: 2000px;
        overflow: auto;
        min-width: 800px;
        max-height: 75%;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .footer {

 src/views/dashboard/BranchFactorySignage.vue

@@ -18,31 +18,11 @@
            <div id="warranty_malfunction_chart" style="width:50%;height: 420px;"></div>
          </div>
          <div class="support-plan-container">
            <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>
@@ -62,6 +42,10 @@
          </div>
        </dv-border-box-9>
      </div>

      <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
                    :modalDataApiParams="modalDataApiParams"
                    @closeModal="modalVisible=false"/>
    </div>
  </div>
</template>
@@ -69,9 +53,11 @@
<script>
  import signageApi from '@/api/signage'
  import moment from 'moment'
  import SignageModal from './modules/SignageModal'

  export default {
    name: 'BranchFactorySignage',
    components: { SignageModal },
    props: {
      productionCode: {
        type: String,
@@ -104,6 +90,32 @@
          { value: '0', name: '停机' },
          { value: '0', name: '运行' }
        ],
        supportPlanList: [
          {
            planTime: '本月三保计划',
            planValueLabel: 'thisMonthMaintenancePlanNum',
            backgroundColor: '#5FE0AF',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList'
          },
          {
            planTime: '本月完成',
            planValueLabel: 'thisMonthMaintenanceRealNum',
            backgroundColor: '#409EFF',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList'
          },
          {
            planTime: '下月三保计划',
            planValueLabel: 'nextMonthMaintenancePlanNum',
            backgroundColor: '#D6BC52',
            apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList'
          },
          {
            planTime: '下下月三保计划',
            planValueLabel: 'nextNextMonthMaintenancePlanNum',
            backgroundColor: '#58D9F9',
            apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList'
          }
        ],
        thisMonthMaintenancePlanNum: 0,
        thisMonthMaintenanceRealNum: 0,
        nextMonthMaintenancePlanNum: 0,
@@ -115,7 +127,12 @@
        doubleBarChartData: {},
        workshopProblemChartData: [],
        maintenanceConfig: {},
        problemConfig: {}
        problemConfig: {},
        modalVisible: false,
        modalTitle: '',
        modalDataApiUrl: '',
        modalTableColumns: [],
        modalDataApiParams: {}
      }
    },
    mounted() {
@@ -184,9 +201,9 @@
          .then(res => {
            if (res.success && res.result) {
              this.techConditionData = [
                { value: res.result[0].qualifiedCount, name: '合格' },
                { value: res.result[0].disabledCount, name: '禁用' },
                { value: res.result[0].limitedUseCount, name: '限用' }
                { value: res.result[0].qualifiedCount, name: '合格', technologyStatus: 'qualified' },
                { value: res.result[0].disabledCount, name: '禁用', technologyStatus: 'disabled' },
                { value: res.result[0].limitedUseCount, name: '限用', technologyStatus: 'limitedUse' }
              ]
            }
            this.drawTechConditionChart()
@@ -206,9 +223,9 @@
          .then(res => {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                { value: res.result[0].failurTotalCount, name: '报修' },
                { value: res.result[0].stopCount, name: '停机' },
                { value: res.result[0].noStopCount, name: '运行' }
                { value: res.result[0].failurTotalCount, name: '报修', isStop: '' },
                { value: res.result[0].stopCount, name: '停机', isStop: '2' },
                { value: res.result[0].noStopCount, name: '运行', isStop: '1' }
              ]
            }
            this.drawWarrantyMalfunctionChart()
@@ -678,6 +695,16 @@
        }
        this.techConditionChart.setOption(option, true)
        this.techConditionChart.hideLoading()

        this.techConditionChart.on('click', params => {
          this.modalTitle = `技术状态（${params.name}）`
          this.modalDataApiParams = {
            technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus,
            productionCode: this.productionCode
          }
          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByTechnologyStatus'
          this.modalVisible = true
        })
      },

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

        this.warrantyMalfunctionChart.on('click', params => {
          this.modalTitle = `报修故障（${params.name}）`
          this.modalDataApiParams = {
            isStop: this.warrantyMalfunctionData.find(item => item.name === params.name).isStop,
            productionCode: this.productionCode
          }
          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByReportRepair'
          this.modalVisible = true
        })
      },

      /* 绘制车间保养滚动表 */
@@ -1081,6 +1118,19 @@
      },

      /**
       * 点击三保展示栏后打开弹窗
       * @param record 点击当前三保信息
       */
      openMaintenanceModal(record) {
        this.modalTitle = record.planTime
        this.modalDataApiParams = {
          productionCode: this.productionCode
        }
        this.modalDataApiUrl = record.apiUrl
        this.modalVisible = true
      },

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

            .plan-value-container {
              display: flex;

 src/views/dashboard/EquipmentSignage.vue

@@ -189,15 +189,22 @@
        </dv-border-box-12>
      </div>
    </div>

    <SignageModal ref="modalRef" :modalVisible="modalVisible" :modalWidth="modalWidth" :modalTitle=modalTitle
                  :modalDataApiUrl="modalDataApiUrl"
                  :modalDataApiParams="modalDataApiParams"
                  @closeModal="modalVisible=false"/>
  </div>
</template>

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

  export default {
    name: 'EquipmentSignage',
    components: { SignageModal },
    props: {
      productionCode: {
        type: String,
@@ -220,18 +227,24 @@
        equipmentDetails: {},
        buttonList: [
          {
            label: '备件信息'
            label: '备件信息',
            pageName: '',
            modalDataApiUrl: ''
          },
          {
            label: '保养计划'
            label: '保养计划',
            pageName: '',
            modalDataApiUrl: '/eam/equipment/list'
          },
          {
            label: '报修',
            pageName: 'eam-MalfunctionRepair'
            pageName: 'eam-MalfunctionRepair',
            modalDataApiUrl: ''
          },
          {
            label: '设备班次',
            pageName: 'mdc-base-DeviceCalendar'
            pageName: 'mdc-base-DeviceCalendar',
            modalDataApiUrl: ''
          }
        ],
        lineChart: '',
@@ -249,7 +262,13 @@
        },
        hideLoadingDelayTime: 500,
        isDisplayEquipmentDetails: false,
        isBelongToMdc: true// 是否在mdc设备表中
        isBelongToMdc: true,// 是否在mdc设备表中
        modalVisible: false,
        modalWidth: 1048,
        modalTitle: '',
        modalDataApiUrl: '',
        modalTableColumns: [],
        modalDataApiParams: {}
      }
    },
    created() {
@@ -276,9 +295,10 @@
          if (newVal) this.lineChartWidth = '40%'
          else this.lineChartWidth = '65%'
          this.$nextTick(() => {
            this.lineChart.resize()
            if (this.lineChart) this.lineChart.resize()
          })
        }
        },
        immediate: true
      }
    },
    methods: {
@@ -374,6 +394,66 @@
            name: record.pageName,
            params: { equipmentId: this.equipmentId }
          })
        } else {
          this.$refs.modalRef.modalTableColumns = [
            {
              title: '#',
              dataIndex: '',
              key: 'rowIndex',
              width: 60,
              align: 'center',
              customRender: function(t, r, index) {
                return parseInt(index) + 1
              }
            },
            {
              width: 150,
              align: 'center',
              title: '设备编号',
              dataIndex: 'num',
              key: 'num'
            },
            {
              width: 200,
              align: 'center',
              title: '设备名称',
              dataIndex: 'name',
              key: 'name'
            },
            {
              width: 200,
              align: 'center',
              title: '设备型号',
              dataIndex: 'model',
              key: 'model'
            },
            {
              width: 250,
              align: 'center',
              title: '规格',
              key: 'specification',
              dataIndex: 'specification'
            },
            {
              width: 170,
              align: 'center',
              title: '下次二保时间',
              key: 'nextSecondMaintenanceTime',
              dataIndex: 'nextSecondMaintenanceTime'
            },
            {
              width: 170,
              align: 'center',
              title: '下次三保时间',
              key: 'nextThirdMaintenanceTime',
              dataIndex: 'nextThirdMaintenanceTime'
            }
          ]
          this.modalWidth = 1248
          this.modalTitle = record.label
          this.modalDataApiParams = { num: this.equipmentId }
          this.modalDataApiUrl = record.modalDataApiUrl
          this.modalVisible = true
        }
      },

@@ -569,7 +649,7 @@
      drawGaugeChart2(opt) {
        const option = Object.assign({}, opt)

        signageApi.getGaugeColorByTypeApi('lyl')
        signageApi.getGaugeColorByTypeApi('kdl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
@@ -603,7 +683,7 @@
      drawGaugeChart3(opt) {
        const option = Object.assign({}, opt)

        signageApi.getGaugeColorByTypeApi('lyl')
        signageApi.getGaugeColorByTypeApi('kdl')
          .then(res => {
            if (res.success) {
              const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
@@ -696,6 +776,13 @@
            itemStyle: {
              color: colorArr[index1]
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'inherit'
              }
            },
            lineStyle: {
              width: 2
            },
@@ -765,7 +852,7 @@
              nameTextStyle: {
                color: '#1AD8DE',
                fontSize: 18,
                padding: [0, 0, 0, 110]
                padding: [0, 0, 0, 120]
              },
              nameGap: 25,
              type: 'value',
@@ -788,7 +875,7 @@
            },
            {
              type: 'value',
              position: 'right',
              position: 'left',
              splitNumber: 5,
              max: 100,
              axisLabel: {

 src/views/dashboard/IndexSignage.vue

@@ -42,7 +42,7 @@
    </div>

    <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
                  :modalTableColumns="modalTableColumns"
                  :modalDataApiParams="modalDataApiParams"
                  @closeModal="modalVisible=false"/>
  </div>
</template>
@@ -82,41 +82,46 @@
          {
            planTime: '本月三保计划',
            planValueLabel: 'thisMonthMaintenancePlanNum',
            backgroundColor: '#5FE0AF'
            backgroundColor: '#5FE0AF',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList'
          },
          {
            planTime: '本月完成',
            planValueLabel: 'thisMonthMaintenanceRealNum',
            backgroundColor: '#409EFF'
            backgroundColor: '#409EFF',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList'
          },
          {
            planTime: '下月三保计划',
            planValueLabel: 'nextMonthMaintenancePlanNum',
            backgroundColor: '#D6BC52'
            backgroundColor: '#D6BC52',
            apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList'
          },
          {
            planTime: '下下月三保计划',
            planValueLabel: 'nextNextMonthMaintenancePlanNum',
            backgroundColor: '#58D9F9'
            backgroundColor: '#58D9F9',
            apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList'
          }
        ],
        thisMonthMaintenancePlanNum: 0,
        thisMonthMaintenanceRealNum: 0,
        nextMonthMaintenancePlanNum: 0,
        nextNextMonthMaintenancePlanNum: 0,
        twoMaintenanceChartData: [['-', '-', '-']],
        twoMaintenanceChartData: [],
        barChart: '',
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        workshopProblemChartData: [['-', '-', '-']],
        workshopProblemChartData: [],
        efficiencyChartConfig: {},
        maintenanceConfig: {},
        problemConfig: {},
        modalVisible: false,
        modalTitle: '',
        modalDataApiUrl: '',
        modalTableColumns: []
        modalTableColumns: [],
        modalDataApiParams: {}
      }
    },
    mounted() {
@@ -185,9 +190,9 @@
          .then(res => {
            if (res.success && res.result) {
              this.techConditionData = [
                { value: res.result[0].qualifiedCount, name: '合格' },
                { value: res.result[0].disabledCount, name: '禁用' },
                { value: res.result[0].limitedUseCount, name: '限用' }
                { value: res.result[0].qualifiedCount, name: '合格', technologyStatus: 'qualified' },
                { value: res.result[0].disabledCount, name: '禁用', technologyStatus: 'disabled' },
                { value: res.result[0].limitedUseCount, name: '限用', technologyStatus: 'limitedUse' }
              ]
            }
            this.drawTechConditionChart()
@@ -207,9 +212,9 @@
          .then(res => {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                { value: res.result[0].failurTotalCount, name: '报修' },
                { value: res.result[0].stopCount, name: '停机' },
                { value: res.result[0].noStopCount, name: '运行' }
                { value: res.result[0].failurTotalCount, name: '报修', isStop: '' },
                { value: res.result[0].stopCount, name: '停机', isStop: '2' },
                { value: res.result[0].noStopCount, name: '运行', isStop: '1' }
              ]
            }
            this.drawWarrantyMalfunctionChart()
@@ -281,11 +286,11 @@
      getWorkshopProblemChartDataByApi() {
        signageApi.getWorkshopProblemListApi()
          .then(res => {
            console.log('res', res.result)
            if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.content, item.createTime])
            this.drawWorkshopProblemChart()
          })
      },


      /* 绘制设备运行状态玫瑰饼图 */
      drawRunningStateChart(productionId) {
@@ -580,7 +585,6 @@
          // 点击触发的为柱状体，除此除外是标题
          if (params.componentType === 'series') {
            // 柱状体跳转统计分析页面展示对应层级数据
            console.log('seriesParams===========', params)
            let productionId
            let tierName
            // 点击的是柱体的值，否则点击的为柱体背景阴影
@@ -591,13 +595,11 @@
              productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId
              tierName = this.efficiencyData.find(item => item.productionCode === params.name).name
            }
            console.log('productionId', productionId)
            this.$router.push({
              name: 'mdc-base-StatisticsChart',
              params: { isEquipment: false, productionId, tierName }
            })
          } else {
            console.log('yAxisParams===========', params)
            this.$emit('switchToNextSignage', { signageName: 'BranchFactory', productionCode: params.value })
          }
        })
@@ -681,49 +683,14 @@
        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
        // })
        this.techConditionChart.on('click', params => {
          this.modalTitle = `技术状态（${params.name}）`
          this.modalDataApiParams = {
            technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus
          }
          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByTechnologyStatus'
          this.modalVisible = true
        })
      },

      /* 绘制设备报修故障饼图 */
@@ -804,44 +771,14 @@
        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
        // })
        this.warrantyMalfunctionChart.on('click', params => {
          this.modalTitle = `报修故障（${params.name}）`
          this.modalDataApiParams = {
            isStop: this.warrantyMalfunctionData.find(item => item.name === params.name).isStop
          }
          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByReportRepair'
          this.modalVisible = true
        })
      },

      /* 绘制车间保养滚动表 */
@@ -990,13 +927,11 @@
        this.barChart.hideLoading()

        this.barChart.on('click', params => {
          console.log('params', params)
          let productionId
          // 点击的是柱体的值，否则点击的为柱体背景阴影
          if (params.seriesIndex === 0) productionId = params.data.productionId
          else productionId = params.name

          console.log('productionId', productionId)
          this.$router.push({
            name: 'mdc-base-OEEAnalysis',
            params: { isEquipment: false, productionId }
@@ -1158,7 +1093,7 @@
      drawWorkshopProblemChart() {
        this.problemConfig = {
          indexHeader: '序号',
          header: [ '问题内容', '时间'],
          header: ['问题内容', '时间'],
          headerBGC: '#86D186',
          oddRowBGC: '#7CBF7C',
          evenRowBGC: '#7CBF7C',
@@ -1175,40 +1110,8 @@
       */
      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
        this.modalDataApiUrl = record.apiUrl
        this.modalVisible = true
      },

      /**

 src/views/dashboard/WorkshopSectionSignage.vue

@@ -14,45 +14,11 @@
              <dv-decoration-11 style="width:45%;height:60px;color: #fff;font-size: 20px;align-self: flex-start">三保计划
              </dv-decoration-11>
              <div class="support-plan-container">
                <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:#FCAA29">
                  <div>延期</div>
                  <div class="plan-value-container">
                    <div class="plan-value">{{maintenanceExtensionNum}}</div>
                    <div>台</div>
                  </div>
                </div>
                <div class="support-plan-item" style="background:#F56C6C">
                  <div>超期</div>
                  <div class="plan-value-container">
                    <div class="plan-value">{{maintenanceOverdueNum}}</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>
@@ -102,15 +68,21 @@
        </dv-border-box-9>
      </div>
    </div>

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

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

  export default {
    name: 'WorkshopSectionSignage',
    components: { SignageModal },
    props: {
      productionCode: {
        type: String,
@@ -141,6 +113,46 @@
          { value: '0', name: '停机' },
          { value: '0', name: '运行' }
        ],
        supportPlanList: [
          {
            planTime: '本月三保计划',
            planValueLabel: 'thisMonthMaintenancePlanNum',
            backgroundColor: '#5FE0AF',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList'
          },

          {
            planTime: '本月完成量',
            planValueLabel: 'thisMonthMaintenanceRealNum',
            backgroundColor: '#409EFF',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList'
          },
          {
            planTime: '延期',
            planValueLabel: 'maintenanceExtensionNum',
            backgroundColor: '#FCAA29',
            apiUrl: '/eam/calibrationOrder/show3MaintenancePostponeList'
          },

          {
            planTime: '超期',
            planValueLabel: 'maintenanceOverdueNum',
            backgroundColor: '#F56C6C',
            apiUrl: '/eam/calibrationOrder/show3MaintenanceOverdueList'
          },
          {
            planTime: '下月计划',
            planValueLabel: 'nextMonthMaintenancePlanNum',
            backgroundColor: '#D6BC52',
            apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList'
          },
          {
            planTime: '下下月计划',
            planValueLabel: 'nextNextMonthMaintenancePlanNum',
            backgroundColor: '#58D9F9',
            apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList'
          }
        ],
        thisMonthMaintenancePlanNum: 0,
        thisMonthMaintenanceRealNum: 0,
        maintenanceExtensionNum: 0,
@@ -164,7 +176,12 @@
        },
        barChart: '',
        barChartData: [],
        equipmentId: ''
        equipmentId: '',
        modalVisible: false,
        modalTitle: '',
        modalDataApiUrl: '',
        modalTableColumns: [],
        modalDataApiParams: {}
      }
    },
    mounted() {
@@ -201,9 +218,9 @@
          .then(res => {
            if (res.success && res.result) {
              this.techConditionData = [
                { value: res.result[0].qualifiedCount, name: '合格' },
                { value: res.result[0].disabledCount, name: '禁用' },
                { value: res.result[0].limitedUseCount, name: '限用' }
                { value: res.result[0].qualifiedCount, name: '合格', technologyStatus: 'qualified' },
                { value: res.result[0].disabledCount, name: '禁用', technologyStatus: 'disabled' },
                { value: res.result[0].limitedUseCount, name: '限用', technologyStatus: 'limitedUse' }
              ]
            }
            this.drawTechConditionChart()
@@ -223,9 +240,9 @@
          .then(res => {
            if (res.success && res.result) {
              this.warrantyMalfunctionData = [
                { value: res.result[0].failurTotalCount, name: '报修' },
                { value: res.result[0].stopCount, name: '停机' },
                { value: res.result[0].noStopCount, name: '运行' }
                { value: res.result[0].failurTotalCount, name: '报修', isStop: '' },
                { value: res.result[0].stopCount, name: '停机', isStop: '2' },
                { value: res.result[0].noStopCount, name: '运行', isStop: '1' }
              ]
            }
            this.drawWarrantyMalfunctionChart()
@@ -420,6 +437,16 @@
        }
        this.techConditionChart.setOption(option, true)
        this.techConditionChart.hideLoading()

        this.techConditionChart.on('click', params => {
          this.modalTitle = `技术状态（${params.name}）`
          this.modalDataApiParams = {
            technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus,
            productionCode: this.productionCode
          }
          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByTechnologyStatus'
          this.modalVisible = true
        })
      },

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

        this.warrantyMalfunctionChart.on('click', params => {
          this.modalTitle = `报修故障（${params.name}）`
          this.modalDataApiParams = {
            isStop: this.warrantyMalfunctionData.find(item => item.name === params.name).isStop,
            productionCode: this.productionCode
          }
          this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByReportRepair'
          this.modalVisible = true
        })
      },

      /* 绘制设备运行状态玫瑰饼图 */
@@ -1183,6 +1220,20 @@
      },

      /**
       * 点击三保展示栏后打开弹窗
       * @param record 点击当前三保信息
       */
      openMaintenanceModal(record) {
        this.modalTitle = record.planTime
        this.modalDataApiParams = {
          productionCode: this.productionCode
        }
        this.modalDataApiUrl = record.apiUrl
        this.modalVisible = true
      },


      /**
       * 窗口尺寸变化时触发
       * 调整图表尺寸以适应分辨率
       */
@@ -1228,6 +1279,7 @@
            width: 30%;
            padding: 5px 10px;
            margin-bottom: 10px;
            cursor: pointer;

            .plan-value-container {
              display: flex;

 src/views/dashboard/modules/SignageModal.vue

@@ -1,18 +1,18 @@
<template>
  <a-modal :title="modalTitle" :width="1048" :visible="modalVisible" :footer="null" @cancel="$emit('closeModal')">
    <a-form layout="inline" @keyup.enter.native="loadData(1)">
      <a-form-item label="设备编号">
        <a-input v-model="queryParam.equipmentId"></a-input>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData(1)">查询</a-button>
          <a-button type="primary" @click="searchReset">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <a-table :columns="modalTableColumns" :dataSource="dataSource" :pagination="ipagination"
             @change="handleTableChange" style="margin-top: 20px"></a-table>
  <a-modal :title="modalTitle" :width="modalWidth" :visible="modalVisible" :footer="null" @cancel="$emit('closeModal')">
    <!--<a-form layout="inline" @keyup.enter.native="loadData(1)">-->
    <!--<a-form-item label="设备编号">-->
    <!--<a-input v-model="queryParam.equipmentNum"></a-input>-->
    <!--</a-form-item>-->
    <!--<a-form-item>-->
    <!--<a-space>-->
    <!--<a-button type="primary" @click="loadData(1)">查询</a-button>-->
    <!--<a-button type="primary" @click="searchReset">重置</a-button>-->
    <!--</a-space>-->
    <!--</a-form-item>-->
    <!--</a-form>-->
    <a-table :columns="modalTableColumns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
             @change="handleTableChange" style="margin-top: 20px" rowKey="equipmentNum"></a-table>
  </a-modal>
</template>

@@ -23,8 +23,11 @@
  export default {
    name: 'SignageModal',
    components: {},
    mixins: [],
    props: {
      modalWidth: {
        type: Number,
        default: 1048
      },
      modalTitle: {
        type: String
      },
@@ -34,8 +37,8 @@
      modalVisible: {
        type: Boolean
      },
      modalTableColumns: {
        type: Array
      modalDataApiParams: {
        type: Object
      }
    },
    watch: {
@@ -65,7 +68,54 @@
          showSizeChanger: true,
          total: 0
        },
        dataSource: []
        dataSource: [],
        modalTableColumns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            width: 150,
            align: 'center',
            title: '设备编号',
            dataIndex: 'equipmentNum',
            key: 'equipmentNum'
          },
          {
            width: 200,
            align: 'center',
            title: '设备名称',
            dataIndex: 'equipmentName',
            key: 'equipmentName'
          },
          {
            width: 200,
            align: 'center',
            title: '设备型号',
            dataIndex: 'equipmentModel',
            key: 'equipmentModel'
          },
          {
            width: 250,
            align: 'center',
            title: '规格',
            key: 'specification',
            dataIndex: 'specification'
          },
          {
            width: 140,
            align: 'center',
            title: '技术状态',
            key: 'technologyStatus',
            dataIndex: 'technologyStatus'
          }
        ]
      }
    },
    methods: {
@@ -77,7 +127,6 @@
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) this.ipagination.current = 1
        const params = this.getQueryParams()//查询条件
        console.log('params', params)
        if (!params) return false
        this.loading = true
        getAction(this.modalDataApiUrl, params).then((res) => {
@@ -96,7 +145,7 @@
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
        const param = Object.assign(sqp, this.queryParam, this.modalDataApiParams, this.isorter, this.filters)
        param.field = this.getQueryField()
        param.pageNo = this.ipagination.current
        param.pageSize = this.ipagination.pageSize
@@ -113,6 +162,7 @@

      searchReset() {
        this.queryParam = {}
        this.dataSource = []
        this.loadData(1)
      },


 src/views/user/Login.vue

@@ -1,75 +1,75 @@
<template>
  <div class="main">
    <div style="display: flex;padding: 50px;">
  <div class="main" style="width: 100%;height: 100%;display: flex;padding: 50px;">

      <div style="flex: 1;display: flex;align-items: center;justify-content: center;position: relative">
        <div class="top">
          <div class="header">
            <a href="/">
              <img src="~@/assets/lxzn.png" class="logo" alt="logo">
              <span class="title">MDC智慧车间</span>
            </a>
          </div>
    <div style="flex: 1.2;display: flex;align-items: center;justify-content: center;position: relative">
      <div class="top">
        <div class="header">
          <a href="/">
            <img src="~@/assets/lxzn.png" class="logo" alt="logo">
            <span class="title">MDC智慧车间</span>
          </a>
        </div>
        <img src="@/assets/login.jpeg" width="60%">
      </div>
      <div style="width: 368px;margin: 30px 50px">
        <a-form-model
          class="user-layout-login"
          @keyup.enter.native="handleSubmit"
        >
          <a-tabs
            :activeKey="customActiveKey"
            :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
            @change="handleTabClick"
          >
            <a-tab-pane
              key="tab1"
              tab="账号密码登录"
            >
              <login-account
                ref="alogin"
                @validateFail="validateFail"
                @success="requestSuccess"
                @fail="requestFailed"
              ></login-account>
            </a-tab-pane>

            <!--<a-tab-pane key="tab2" tab="手机号登录">-->
            <!--<login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>-->
            <!--</a-tab-pane>-->
          </a-tabs>

          <a-form-model-item>
            <!--<a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>-->
            <!--<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">-->
            <!--忘记密码-->
            <!--</router-link>-->
            <!--<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >-->
            <!--注册账户-->
            <!--</router-link>-->
          </a-form-model-item>

          <a-form-item style="margin-top:24px">
            <a-button
              size="large"
              type="primary"
              htmlType="submit"
              class="login-button"
              :loading="loginBtn"
              @click.stop.prevent="handleSubmit"
              :disabled="loginBtn"
            >确定
            </a-button>
          </a-form-item>

          <a-form-model-item style="color: red">
            密级：内部&nbsp;&nbsp;&nbsp;&nbsp;警告：本系统禁止存储、处理、传输涉密信息
          </a-form-model-item>

        </a-form-model>
      </div>
      <img src="@/assets/login.jpeg" width="65%" height="44%">
    </div>

    <div style="flex: 1;padding: 30px 50px;">
      <a-form-model
        class="user-layout-login"
        @keyup.enter.native="handleSubmit"
      >
        <a-tabs
          :activeKey="customActiveKey"
          :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
          @change="handleTabClick"
        >
          <a-tab-pane
            key="tab1"
            tab="账号密码登录"
          >
            <login-account
              ref="alogin"
              @validateFail="validateFail"
              @success="requestSuccess"
              @fail="requestFailed"
            ></login-account>
          </a-tab-pane>

          <!--<a-tab-pane key="tab2" tab="手机号登录">-->
          <!--<login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>-->
          <!--</a-tab-pane>-->
        </a-tabs>

        <a-form-model-item>
          <!--<a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>-->
          <!--<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">-->
          <!--忘记密码-->
          <!--</router-link>-->
          <!--<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >-->
          <!--注册账户-->
          <!--</router-link>-->
        </a-form-model-item>

        <a-form-item style="margin-top:24px">
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button"
            :loading="loginBtn"
            @click.stop.prevent="handleSubmit"
            :disabled="loginBtn"
          >确定
          </a-button>
        </a-form-item>

        <a-form-model-item style="color: red;font-size: 0.8vw">
          密级：内部&nbsp;&nbsp;&nbsp;&nbsp;警告：本系统禁止存储、处理、传输涉密信息
        </a-form-model-item>

      </a-form-model>
    </div>

    <!--<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>-->
    <login-select-tenant
      ref="loginSelect"
@@ -306,7 +306,7 @@
  .top {
    text-align: center;
    position: absolute;
    top: 45px;
    top: 10%;

    .header {
      height: 44px;
@@ -330,7 +330,7 @@
      }

      .title {
        font-size: 30px;
        font-size: 2vw;
        color: #000;
        font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: 600;