1、根据最新设计方案调整设备管理模块点击弹窗样式 2、mdc公司级首页设备管理模块与点击功能联调

zhaowei

2 天以前 f02cf09eb0c6933dd5ccc4dac6c6c09c3b5f3d3c

1、根据最新设计方案调整设备管理模块点击弹窗样式
2、mdc公司级首页设备管理模块与点击功能联调

 src/views/dashboard/Analysis.vue

@@ -84,7 +84,7 @@
  /deep/ .back-nav {
    width: 100px;
    height: 30px;
    color: #fff;
    color: rgba(0, 0, 0, .45);
    position: absolute;
    top: 15px;
    left: 10px;

 src/views/dashboard/BranchFactorySignage.vue

@@ -5,43 +5,43 @@
        <div class="back-nav" @click="$emit('backToLastSignage','Index')" v-if="userType===4">
          <dv-decoration-7>上一级</dv-decoration-7>
        </div>
        <dv-border-box-9 style="padding: 30px 20px 0">
          <div id="running_state_chart" style="width:100%;height: 400px;"></div>
          <div id="efficiency_chart" style="width: 100%;height: 350px"></div>
        </dv-border-box-9>
        <!--<dv-border-box-9 style="padding: 30px 20px 0">-->
          <!--<div id="running_state_chart" style="width:100%;height: 400px;"></div>-->
          <!--<div id="efficiency_chart" style="width: 100%;height: 350px"></div>-->
        <!--</dv-border-box-9>-->
      </div>

      <div style="width: 42%" class="middle-col">
        <dv-border-box-9 style="padding: 30px 20px 0">
          <div style="display: flex">
            <div id="tech_condition_chart" style="width:50%;height: 420px;"></div>
            <div id="warranty_malfunction_chart" style="width:50%;height: 420px;"></div>
          </div>
          <div class="support-plan-container">
            <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">{{$data[item.planValueLabel]}}</div>
                <div>台</div>
              </div>
            </div>
          </div>
          <div style="padding: 0 55px;margin-top: 50px">
            <dv-scroll-board :config="maintenanceConfig" style="width:100%;height:80px"/>
          </div>
        </dv-border-box-9>
      </div>
      <!--<div style="width: 42%" class="middle-col">-->
        <!--<dv-border-box-9 style="padding: 30px 20px 0">-->
          <!--<div style="display: flex">-->
            <!--<div id="tech_condition_chart" style="width:50%;height: 420px;"></div>-->
            <!--<div id="warranty_malfunction_chart" style="width:50%;height: 420px;"></div>-->
          <!--</div>-->
          <!--<div class="support-plan-container">-->
            <!--<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">{{$data[item.planValueLabel]}}</div>-->
                <!--<div>台</div>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div style="padding: 0 55px;margin-top: 50px">-->
            <!--<dv-scroll-board :config="maintenanceConfig" style="width:100%;height:80px"/>-->
          <!--</div>-->
        <!--</dv-border-box-9>-->
      <!--</div>-->

      <div style="width: 32%">
        <dv-border-box-9 style="padding: 30px 0 20px">
          <div id="bar_chart" style="width:100%;height: 280px;"></div>
          <div id="double_bar_chart" style="width:100%;height: 280px;"></div>
          <div style="padding: 0 20px;">
            <dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/>
          </div>
        </dv-border-box-9>
      </div>
      <!--<div style="width: 32%">-->
        <!--<dv-border-box-9 style="padding: 30px 0 20px">-->
          <!--<div id="bar_chart" style="width:100%;height: 280px;"></div>-->
          <!--<div id="double_bar_chart" style="width:100%;height: 280px;"></div>-->
          <!--<div style="padding: 0 20px;">-->
            <!--<dv-scroll-board :config="problemConfig" style="width:100%;height:220px"/>-->
          <!--</div>-->
        <!--</dv-border-box-9>-->
      <!--</div>-->

      <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl"
                    :modalDataApiParams="modalDataApiParams"

 src/views/dashboard/IndexSignage.vue

@@ -24,7 +24,7 @@
              </div>
            </div>
          </div>
          <div style="padding: 0 55px;margin-top: 10px">
          <div style="padding: 0 55px;margin-top : 10px">
            <dv-scroll-board :config="maintenanceConfig" style="width:100%;height:220px"/>
          </div>
        </dv-border-box-9>
@@ -91,25 +91,25 @@
            planTime: '本月三保计划',
            planValueLabel: 'thisMonthMaintenancePlanNum',
            backgroundColor: '#719D8E',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList'
            code: 'bysbzs'
          },
          {
            planTime: '本月完成',
            planValueLabel: 'thisMonthMaintenanceRealNum',
            backgroundColor: '#409EFF',
            apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList'
            code: 'bwc'
          },
          {
            planTime: '下月三保计划',
            planValueLabel: 'nextMonthMaintenancePlanNum',
            backgroundColor: '#A8985D',
            apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList'
            code: 'xysb'
          },
          {
            planTime: '下下月三保计划',
            planValueLabel: 'nextNextMonthMaintenancePlanNum',
            backgroundColor: '#58D9F9',
            apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList'
            code: 'xxysb'
          }
        ],
        thisMonthMaintenancePlanNum: 0,
@@ -146,8 +146,6 @@
      getChartDataByApi() {
        this.getRunningStateDataByApi()
        this.getEfficiencyDataByApi()
        // this.getTechConditionDataByApi()
        // this.getWarrantyMalfunctionDataByApi()
        this.getTechConditionAndWarrantyMalfunctionDataByApi()
        this.getThirdMaintenanceConditionByApi()
        this.getTwoMaintenanceChartDataByApi()
@@ -163,7 +161,7 @@
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'rgba(0,0,0,.05)' // 遮罩层
          maskColor: 'transparent' // 遮罩层
        })
        signageApi.getEquipmentStatusStatisticsApi()
          .then(res => {
@@ -183,7 +181,7 @@
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'rgba(0,0,0,.05)' // 遮罩层
          maskColor: 'transparent' // 遮罩层
        })
        signageApi.getEquipmentUtilizationStatisticsApi()
          .then(res => {
@@ -202,13 +200,13 @@
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'rgba(0,0,0,.05)' // 遮罩层
          maskColor: 'transparent' // 遮罩层
        })
        this.warrantyMalfunctionChart.showLoading({
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'rgba(0,0,0,.05)' // 遮罩层
          maskColor: 'transparent' // 遮罩层
        })
        signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi()
          .then(res => {
@@ -231,9 +229,9 @@
                }
              ]
              this.warrantyMalfunctionData = [
                { value: res.result.bxqk.find(item => item.code === 'bx').value, name: '报修', isStop: '' },
                { value: res.result.bxqk.find(item => item.code === 'stop').value, name: '停机', isStop: '2' },
                { value: res.result.bxqk.find(item => item.code === 'run').value, name: '运行', isStop: '1' }
                { value: res.result.bxqk.find(item => item.code === 'bx').value, name: '报修', code: 'bx' },
                { value: res.result.bxqk.find(item => item.code === 'stop').value, name: '停机', code: 'stop' },
                { value: res.result.bxqk.find(item => item.code === 'run').value, name: '运行', code: 'run' }
              ]
              this.techConditionChartRequireFinished = true
              this.warrantyMalfunctionChartRequireFinished = true
@@ -272,7 +270,7 @@
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'rgba(0,0,0,.05)' // 遮罩层
          maskColor: 'transparent' // 遮罩层
        })
        signageApi.getEquipmentOEEStatistics()
          .then(res => {
@@ -290,7 +288,7 @@
          text: '数据加载中 ...',
          color: '#0696e1', // 加载动画颜色
          textColor: 'rgba(0, 0, 0, .45)',
          maskColor: 'rgba(0,0,0,.05)' // 遮罩层
          maskColor: 'transparent' // 遮罩层
        })
        signageApi.getEquipmentMonthStatisticsApi()
          .then(res => {
@@ -676,14 +674,12 @@
        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
        //   }
        //   this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByTechnologyStatus'
        //   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/equipment/list'
          this.modalVisible = true
        })
      },

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

      /* 绘制车间保养滚动表 */
@@ -1145,9 +1139,10 @@
       * @param record 点击当前三保信息
       */
      openMaintenanceModal(record) {
        // this.modalTitle = record.planTime
        // this.modalDataApiUrl = record.apiUrl
        // this.modalVisible = true
        this.modalTitle = record.planTime
        this.modalDataApiParams = { code: record.code }
        this.modalDataApiUrl = '/eam/home/maintenanceList'
        this.modalVisible = true
      },

      re_drawPieChart() {

 src/views/dashboard/modules/SignageModal.vue

@@ -1,24 +1,12 @@
<template>
  <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-table bordered :columns="modalTableColumns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
             @change="handleTableChange" rowKey="id"/>
  </a-modal>
</template>

<script>
  import { putAction, getAction } from '@/api/manage'
  import { filterObj } from '@/utils/util'

  export default {
    name: 'SignageModal',
@@ -38,7 +26,9 @@
        type: Boolean
      },
      modalDataApiParams: {
        type: Object
        type: Object,
        default: () => {
        }
      }
    },
    watch: {
@@ -54,7 +44,6 @@
    },
    data() {
      return {
        queryParam: {},
        loading: false,
        /* 分页参数 */
        ipagination: {
@@ -84,36 +73,33 @@
            width: 150,
            align: 'center',
            title: '设备编号',
            dataIndex: 'equipmentNum',
            key: 'equipmentNum'
            dataIndex: 'equipmentCode',
            key: 'equipmentCode'
          },
          {
            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'
            title: '使用部门',
            key: 'zxfactoryOrgCode_dictText',
            dataIndex: 'zxfactoryOrgCode_dictText'
          },
          {
            width: 140,
            width: 100,
            align: 'center',
            title: '技术状态',
            key: 'technologyStatus',
            dataIndex: 'technologyStatus'
            key: 'technologyStatus_dictText',
            dataIndex: 'technologyStatus_dictText'
          }
        ]
      }
@@ -126,42 +112,27 @@
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) this.ipagination.current = 1
        const params = this.getQueryParams()//查询条件
        const params = Object.assign({}, this.modalDataApiParams)
        params.pageNo = this.ipagination.current
        params.pageSize = this.ipagination.pageSize
        if (!params) return false
        this.loading = true
        getAction(this.modalDataApiUrl, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records || res.result
            if (res.result.total) this.ipagination.total = res.result.total
            else this.ipagination.total = 0
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },

      getQueryParams() {
        //获取查询条件
        let sqp = {}
        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
        return filterObj(param)
      },

      getQueryField() {
        let str = 'id,'
        this.modalTableColumns.forEach(function(value) {
          str += ',' + value.dataIndex
        })
        return str
        getAction(this.modalDataApiUrl, params)
          .then((res) => {
            if (res.success) {
              this.dataSource = res.result.records || res.result
              if (res.result.total) this.ipagination.total = res.result.total
              else this.ipagination.total = 0
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
            this.loading = false
          })
      },

      searchReset() {
        this.queryParam = {}
        this.dataSource = []
        this.loadData(1)
      },
@@ -177,94 +148,3 @@
    }
  }
</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>