1、首页公司级和分厂级看板中的问题列表接口完成与后端数据联调 2、问题反馈页面完成所有布局及相关功能

zhuzhuanzhuan

2024-05-16 76a9e755ef42b12cfcf16ac9f293322a34d348bd

 src/views/dashboard/IndexSignage.vue

@@ -15,39 +15,11 @@
            <div id="warranty_malfunction_chart" style="width:50%;height: 340px;"></div>
          </div>
          <div class="support-plan-container">
            <!--<div v-for="item in supportPlanList" class="support-plan-item"-->
            <!--:style="{background:item.background}">-->
            <!--<div>{{item.label}}</div>-->
            <!--<div class="plan-value-container">-->
            <!--<div class="plan-value">{{item.value}}</div>-->
            <!--<div>台</div>-->
            <!--</div>-->
            <!--</div>-->
            <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>
@@ -68,15 +40,21 @@
        </dv-border-box-9>
      </div>
    </div>

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

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

  export default {
    name: 'IndexSignage',
    components: { SignageModal },
    data() {
      return {
        runningStateChart: '',
@@ -100,6 +78,28 @@
          { value: '10', name: '停机' },
          { value: '8', name: '运行' }
        ],
        supportPlanList: [
          {
            planTime: '本月三保计划',
            planValueLabel: 'thisMonthMaintenancePlanNum',
            backgroundColor: '#5FE0AF'
          },
          {
            planTime: '本月完成',
            planValueLabel: 'thisMonthMaintenanceRealNum',
            backgroundColor: '#409EFF'
          },
          {
            planTime: '下月三保计划',
            planValueLabel: 'nextMonthMaintenancePlanNum',
            backgroundColor: '#D6BC52'
          },
          {
            planTime: '下下月三保计划',
            planValueLabel: 'nextNextMonthMaintenancePlanNum',
            backgroundColor: '#58D9F9'
          }
        ],
        thisMonthMaintenancePlanNum: 0,
        thisMonthMaintenanceRealNum: 0,
        nextMonthMaintenancePlanNum: 0,
@@ -109,15 +109,19 @@
        barChartData: [],
        doubleBarChart: '',
        doubleBarChartData: {},
        workshopProblemChartData: [['-', '-', '-']],
        efficiencyChartConfig: {},
        maintenanceConfig: {},
        problemConfig: {}
        problemConfig: {},
        modalVisible: false,
        modalTitle: '',
        modalDataApiUrl: '',
        modalTableColumns: []
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.getChartDataByApi()
      this.drawProblemChart()
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
@@ -133,6 +137,7 @@
        this.getTwoMaintenanceChartDataByApi()
        this.getBarChartDataByApi()
        this.getDoubleBarChartDataByApi()
        this.getWorkshopProblemChartDataByApi()
      },

      /* 调用接口获取设备运行状态 */
@@ -235,7 +240,7 @@
      getTwoMaintenanceChartDataByApi() {
        signageApi.getTwoMaintenancePlanListApi()
          .then(res => {
            if (res.success && res.result) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
            if (res.success && res.result.length > 0) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content])
            this.drawMaintenanceChart()
          })
      },
@@ -269,6 +274,16 @@
          .then(res => {
            if (res.success) this.doubleBarChartData = res.result
            this.drawDoubleBarChart()
          })
      },

      /* 调用接口获取车间问题列表*/
      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()
          })
      },

@@ -431,7 +446,7 @@
            }
          },
          xAxis: {
            name: '单位',
            name: '',
            nameTextStyle: {
              color: '#fff'
            },
@@ -558,7 +573,7 @@
            }
          ]
        }
        option.title.text = `${moment().format('M月D日')}利用率`
        option.title.text = `${moment().subtract(1, 'days').format('M月D日')}利用率`
        this.efficiencyChart.setOption(option, true)
        this.efficiencyChart.hideLoading()
        this.efficiencyChart.on('click', params => {
@@ -638,7 +653,7 @@
              center: ['45%', '60%'],
              color: [
                '#0FC61A',
                '#0DAF15',
                '#F56436',
                '#8B8B8B'
              ],
              label: {
@@ -665,6 +680,50 @@
        }
        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
        // })
      },

      /* 绘制设备报修故障饼图 */
@@ -744,6 +803,45 @@
        }
        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
        // })
      },

      /* 绘制车间保养滚动表 */
@@ -756,7 +854,7 @@
          evenRowBGC: '#295562',
          data: this.twoMaintenanceChartData,
          index: true,
          columnWidth: [100],
          columnWidth: [100, 300, 300, 300],
          align: ['center', 'center', 'center', 'center']
        }
      },
@@ -836,7 +934,7 @@
            interval: yAxisInterval,
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff'
              color: '#fff'
            },
            axisTick: {
              show: false
@@ -1057,29 +1155,60 @@
      },

      /* 绘制问题滚动表 */
      drawProblemChart() {
      drawWorkshopProblemChart() {
        this.problemConfig = {
          indexHeader: '序号',
          header: ['时间', '问题内容'],
          header: [ '问题内容', '时间'],
          headerBGC: '#86D186',
          oddRowBGC: '#7CBF7C',
          evenRowBGC: '#7CBF7C',
          data: [
            // ['2024年3月23号', '大家注意安全问题'],
            // ['2024年3月23号', '大家注意安全问题'],
            // ['2024年3月23号', '大家注意安全问题'],
            // ['2024年3月23号', '大家注意安全问题'],
            // ['2024年3月23号', '大家注意安全问题'],
            // ['2024年3月23号', '大家注意安全问题'],
            // ['2024年3月23号', '大家注意安全问题'],
            // ['2024年3月23号', '大家注意安全问题'],
            // ['2024年3月23号', '大家注意安全问题'],
            // ['2024年3月23号', '大家注意安全问题']
          ],
          data: this.workshopProblemChartData,
          index: true,
          columnWidth: [100, 300, 300],
          columnWidth: [100, 300, 150],
          align: ['center']
        }
      },

      /**
       * 点击三保展示栏后打开弹窗
       * @param record 点击当前三保信息
       */
      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
      },

      /**
@@ -1127,6 +1256,7 @@
            padding: 5px 20px;
            font-size: 20px;
            margin-bottom: 10px;
            cursor: pointer;

            .plan-value-container {
              display: flex;