web_dist/src/views/operate-monitoring/OperateMonitoringDate.vue

<template>

  <div class="layout_container">
    <header>
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                      end-placeholder="结束日期" :shortcuts="shortcuts"></el-date-picker>
      <el-divider direction="vertical"></el-divider>
      <el-button icon="Search" type="primary" @click="query">查询</el-button>
    </header>
    <div class="layout_main layout_el-table">
      <xc-table :data="returnData" :openPaging="false" final-height="100%">
        <el-table-column type="index" label="序号" width="100">
          <template #default="scope">
            <span class="index_common">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="统计结果" width="500" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.reportName }}:
            <span style="color: #fc0404;">{{ scope.row.overview }}</span>
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="timeFine" label="统计日期" width="220">
          <template #default="scope">
            <span>{{ kssj }} 至 {{ jssj }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="port" label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="reportFirstInfo(scope.row)">详细信息</el-button>
          </template>
        </el-table-column>
      </xc-table>
    </div>
  </div>

  <el-dialog :title="titleChart" v-model="fstDrawer" fullscreen destroy-on-close>
    <ReportFirstPage :reportFirst="reportFirst"/>
  </el-dialog>
</template>
<script setup name="OperateMonitoring">
import {shortcuts, clockinShortcuts} from '@/data/shortcuts'
import {formatDate, getDateRangeFormatDate} from '@/utils/date'
import {ref} from 'vue'
import {clone} from '@/utils/clone'
import XcTable from "@/components/xiao-chan/xc-table/XcTable"
import {selectReportPortal, selectReportGroup} from '@/api/reports/high-report'
import ReportFirstPage from '@/components/operate-monitoring/ReportFirstPage.vue'
import router from "@/router";

const type = router.currentRoute.value.params.type
const start = formatDate(clockinShortcuts[1].value[1])
const end = formatDate(clockinShortcuts[1].value[1])
const queryTerm = ref({
  startTime: '',
  endTime: '',
  reportType: 'cy',
  menuId: 123,
  levelType: '2',
  type: '2'
})

if(type === 'zy'){
  queryTerm.value.reportType = 'cy'
  queryTerm.value.menuId = 123
  queryTerm.value.levelType = '2'
  queryTerm.value.type = '2'
} else if(type === 'mz'){
  queryTerm.value.reportType = 'mz'
  queryTerm.value.menuId = 124
  queryTerm.value.levelType = '2'
  queryTerm.value.type = '2'
}

const kssj = ref('')
const jssj = ref('')
onMounted(() => {
  kssj.value = start
  jssj.value = end
  queryTerm.value.startTime = start;
  queryTerm.value.endTime = end + " 23:59:59";
  dateRange.value = [start, end];
});
const returnData = ref({
  currentPage: 1,
  pageSize: 30,
  total: 0,
  title: '',
  data: []
});
const dateRange = ref([]);
const query = async () => {
  if (dateRange.value) {
    let dateS = getDateRangeFormatDate(dateRange.value);
    queryTerm.value.startTime = dateS.startTime;
    queryTerm.value.endTime = dateS.endTime;
    kssj.value = formatDate(dateRange.value[0])
    jssj.value = formatDate(dateRange.value[1])
  } else {
    queryTerm.value.startTime = start;
    queryTerm.value.endTime = end;
    ElMessage({
      type: "info",
      message: "默认查询当天的数据",
      duration: 2500,
      showClose: true,
    });
  }
  selectReportPortal(queryTerm.value)
      .then((res) => {
        returnData.value.data = res.data
        returnData.value.title = res.title
      });
};
// ------------------------------详细信息----------------------------------------
const fstDrawer = ref(false)
const reportFirst = ref({})
const titleChart = ref('')
const reportFirstInfo = (row) => {
  const params = {
    startTime: queryTerm.value.startTime,
    endTime: queryTerm.value.endTime,
    reportId: row.reportId,
    reportName: row.reportName,
    reportType: row.reportType,
    displayType: row.displayType,
    menuId: row.menuId,
    levelType: queryTerm.value.levelType,
    type: queryTerm.value.type,
  }
  selectReportGroup(params).then((res) => {
    reportFirst.value = res
    titleChart.value = res.title
    fstDrawer.value = true
    reportFirst.value.row = row
    reportFirst.value.kssj = kssj.value
    reportFirst.value.jssj = jssj.value
    reportFirst.value.params = clone(params)
  })
}

function interceptStr(str, ele, index) {
  let num = str.indexOf(ele) + 1;
  if (index <= 1) {
    str = str.substring(num);
    return str
  }
  ;
  str = str.substring(num);
  index--;
  return interceptStr(str, ele, index);
}
</script>
<style scoped>
.index_common {
  text-shadow: none;
  font-size: 10px;
  padding-top: 1px;
  padding-bottom: 3px;
  font-weight: normal;
  line-height: 12px;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 4em;
  color: #fff;
  background: #1e90ff;
}
</style>