1、首页 （1）设备级看板单击设备效率统计仪表盘图标跳转至统计分析页面并根据唯一编号筛选页面对应数据 （2）设备级看板点击设备班次按钮跳转至工作日历页...

zhuzhuanzhuan

2024-04-18 28189102d735bfc2c41720d1ef292bd9024b49f2

 src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue

@@ -1,43 +1,43 @@
<template>
  <div class="deviceCalendar_list">
      <!-- 查询区域 -->
      <div>
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24" style="width: 100%">
              <a-col :md="6" :sm="6">
                <a-form-item label="时间">
                  <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/>
                </a-form-item>
              </a-col>
              <a-col :md="2" :sm="2" :xs="2">
                <a-space>
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">配置</a-button>
                </a-space>
              </a-col>
              <!--<a-col :md="2" :sm="2" :xs="2">-->
                <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
              <!--</a-col>-->
              <!--<a-col :md="2" :sm="2">-->
                <!--&lt;!&ndash;//沈飞&ndash;&gt;-->
                <!--<a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">配置</a-button>-->
    <!-- 查询区域 -->
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24" style="width: 100%">
            <a-col :md="6" :sm="6">
              <a-form-item label="时间">
                <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="2" :xs="2">
              <a-space>
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">配置</a-button>
              </a-space>
            </a-col>
            <!--<a-col :md="2" :sm="2" :xs="2">-->
            <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
            <!--</a-col>-->
            <!--<a-col :md="2" :sm="2">-->
            <!--&lt;!&ndash;//沈飞&ndash;&gt;-->
            <!--<a-button v-has="'user.disposition'" type="primary" @click="handleAdd" icon="plus">配置</a-button>-->

                <!--&lt;!&ndash;<a-button type="primary" @click="handleAdd" icon="plus">配置</a-button>&ndash;&gt;-->
              <!--</a-col>-->
            <!--&lt;!&ndash;<a-button type="primary" @click="handleAdd" icon="plus">配置</a-button>&ndash;&gt;-->
            <!--</a-col>-->


            </a-row>
          </a-form>
        </div>
          </a-row>
        </a-form>
      </div>
    </div>

      <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
        <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
                 size="middle" rowKey="id" :columns="columns"
                 @change="handleTableChange"  class="ant-table-striped"
                 :dataSource="dataSource" :pagination="ipagination"
                 :loading="loading"  :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
    <div style="overflow: hidden;width: 100%;margin-top: 20px;flex: 1" id="DeviceList">
      <a-table ref="table" bordered :scroll="{x:'max-content',y:scrollY}"
               size="middle" rowKey="id" :columns="columns"
               @change="handleTableChange" class="ant-table-striped"
               :dataSource="dataSource" :pagination="ipagination"
               :loading="loading" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
          <span slot="action"
                slot-scope="text, record">
            <a-popconfirm
@@ -47,19 +47,19 @@
                  <a>删除</a>
                </a-popconfirm>
          </span>
          <span slot="isDaySpan" slot-scope="text, record">
        <span slot="isDaySpan" slot-scope="text, record">
           <span v-if="text == 'true'">是</span>
           <span v-if="text == 'false'">否</span>
         </span>
        </a-table>
      </div>
      <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model>
      </a-table>
    </div>
    <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model>
  </div>
</template>

<script>
  import moment from 'moment'
  import { filterObj } from '@/utils/util';
  import { filterObj } from '@/utils/util'
  import { putAction, getAction } from '@/api/manage'
  import DeviceCalendarModel from './DeviceCalendarModel'
  import DeviceCalendarAdd from './DeviceCalendarAdd'
@@ -70,23 +70,23 @@

  export default {
    name: 'DeviceCalendarList',
    components: { DeviceCalendarModel,DeviceCalendarAdd ,DeviceCalendarListModel},
    components: { DeviceCalendarModel, DeviceCalendarAdd, DeviceCalendarListModel },
    mixins: [JeecgListMixin],
    data() {
      return {
        dates:[],
        dates: [],
        yearAndMonth: {},
        identifying: [],
        queryParam: {},
        disableMixinCreated: true,
        scrollY:465,
        scrollY: 465,
        /* 分页参数 */
        ipagination:{
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
@@ -97,98 +97,101 @@
            title: '日期',
            align: 'center',
            dataIndex: 'effectiveDate',
            width:100,
            width: 100
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId',
            width:150
            width: 150
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
            width:150
            width: 150
          },
          {
            title: '班制',
            align: 'center',
            dataIndex: 'shiftName',
            width:150
            width: 150
          },
          {
            title: '班次',
            align: 'center',
            dataIndex: 'shiftSubName',
            width:150
            width: 150
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'startDate',
            width:140
            width: 140
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endDate',
            width:140
            width: 140
          },
          {
            title: '是否跨天',
            align: 'center',
            dataIndex: 'isDaySpan',
            scopedSlots: { customRender: 'isDaySpan' },
            width:100
            width: 100
          },
          {
            title: '开始休息时间',
            align: 'center',
            dataIndex: 'sleepStartDate',
            width:140
            width: 140
          },
          {
            title: '结束休息时间',
            align: 'center',
            dataIndex: 'sleepEndDate',
            width:140
            width: 140
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            align: 'center',
            width: 100,
            scopedSlots: { customRender: 'action' },
            fixed:'right'
            fixed: 'right'
          }
        ],
        checkedList: ['lyl'],
        dataList: [],
        url: {
          list: '/mdc/mdcDeviceCalendar/list',
          delete:'/mdc/mdcDeviceCalendar/delete'
          delete: '/mdc/mdcDeviceCalendar/delete'
        }
      }
    },
    props: { node: {}, Type:'' },
    props: { node: {}, Type: '' },
    created() {
      const { equipmentId } = this.$route.params
      if (equipmentId) this.queryParam.equipmentId = equipmentId

      this.dates = [moment().subtract('days', 0), moment().subtract('days', 0)]
      this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
      this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
      this.queryParam.typeTree = "1"
      this.queryParam.typeTree = '1'
      this.loadData()
    },
    mounted(){
      window.addEventListener('resize',this.handleWindowResize)
    mounted() {
      window.addEventListener('resize', this.handleWindowResize)
      this.handleWindowResize()
    },
    beforeDestroy(){
      window.removeEventListener('resize',this.handleWindowResize)
    beforeDestroy() {
      window.removeEventListener('resize', this.handleWindowResize)
    },
    watch: {
      Type(valmath){
        this.dataList = [];
      Type(valmath) {
        this.dataList = []
        this.queryParam.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
@@ -196,7 +199,7 @@
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId != null) {
            this.queryParam.equipmentId = val.equipmentId
            this.queryParam.parentId = " "
            this.queryParam.parentId = ' '
            this.ipagination.current = 1
            this.loadData()
          } else {
@@ -221,41 +224,40 @@
        this.loadData()
      },
      loadData(arg) {
        this.dataSource = [];
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
        this.dataSource = []
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
          this.ipagination.current = 1
        }

        var params = this.getQueryParams();//查询条件
        var params = this.getQueryParams()//查询条件

        if(!params){
          return false;
        if (!params) {
          return false
        }
        params.startTime = this.queryParam.startTime;
        params.endTime = this.queryParam.endTime;
        params.parentId = this.queryParam.parentId;
        params.equipmentId = this.queryParam.equipmentId;
        params.orderByName = "ascend";
        this.loading = true;
        params.startTime = this.queryParam.startTime
        params.endTime = this.queryParam.endTime
        params.parentId = this.queryParam.parentId
        params.equipmentId = this.queryParam.equipmentId
        params.orderByName = 'ascend'
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            // console.log(res)
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------

            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
@@ -265,51 +267,55 @@
      handleAdd() {
        let record = {}
        if (JSON.stringify(this.node) != '{}') {
            record = { equipmentId: this.node.equipmentId, equmentName: this.node.equipmentName }
          record = { equipmentId: this.node.equipmentId, equmentName: this.node.equipmentName }
        }
        this.$refs.modalForm.add(record)
        this.$refs.modalForm.title = '设备工作日历配置'
        this.$refs.modalForm.disableSubmit = false
      },

      handleWindowResize(){
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
      handleWindowResize() {
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0, -2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0, -2)
        this.scrollY = boxHeight - tableHeadHeight - 50
      }
    }
  }
</script>
<style scoped>
  .deviceCalendar_list{
  .deviceCalendar_list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1920px){
    .deviceCalendar_list{
      height: 812px!important;
  @media screen and (min-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .deviceCalendar_list{
      height: 812px!important;

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .deviceCalendar_list {
      height: 812px !important;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .deviceCalendar_list{
      height: 664px!important;

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .deviceCalendar_list {
      height: 664px !important;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .deviceCalendar_list{
      height: 565px!important;

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }
  @media screen and (max-width: 1280px){
    .deviceCalendar_list{
      height: 565px!important;

  @media screen and (max-width: 1280px) {
    .deviceCalendar_list {
      height: 565px !important;
    }
  }