修改LineChart.vue位置

zmc

2023-12-01 d404f7f0ffb8b7b8b930a2b583afe2037cffc3f8

 src/views/risk_assessment/DataIndexRank.vue

@@ -3,6 +3,7 @@
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
import statisticApi from '@/api/statistic/statisticApi.js'
import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
@@ -35,13 +36,16 @@
        // 结束时间
        endTime: ''
      },
      tableHeight: '600'
      tableHeight: '600',

      orderProp: 'dayAvg',
      order: 'descending'
    }
  },
  setup() {
    // 引入 百分号比较大小 导出功能
    const { cmpp, exportToExcel } = useCommonFunction()
    return { cmpp, exportToExcel }
    const { cmpp, exportToExcel, percentFormatter } = useCommonFunction()
    return { cmpp, exportToExcel, percentFormatter }
  },

  mounted() {
@@ -95,14 +99,14 @@
        }
      }

      //  在线率，有效率 不满足标准时 变颜色
      if (columnIndex == 7) {
        if (!this.cmpp(row.dayOnline, '90%')) {
        if (row.dayOnline < 0.9) {
          return 'red-color'
        }
      }

      if (columnIndex == 8) {
        if (!this.cmpp(row.dayValid, '90%')) {
        if (row.dayValid < 0.9) {
          return 'red-color'
        }
      }
@@ -111,9 +115,9 @@
    // 功能：表格高度根据内容自适应
    calTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight
      const h2 = this.$refs.h2.$el.offsetHeight;
      const h2 = this.$refs.h2.$el.offsetHeight
      // 其中一个40是盒子的总外边距
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`;
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`
    },
    // 页大小改变时触发
    handleSizeChange(val) {
@@ -143,21 +147,30 @@
    },

    // 点击统计按钮
    fetchData() {
      let params = {}
      params['page'] = this.currentPage
      params['pageSize'] = this.pageSize
      params['siteName'] = ''
    fetchData(p) {
      if (p) {
        this.orderProp = p.prop
        this.order = p.order
      }
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        siteName: '',
        orderProp: this.orderProp,
        //排序 ascending 正序，descending 降序
        asc: this.order == 'ascending'
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }

      this.loading = true
      this.queryButton = true
      this.isNoData = false
      this.$http.get('/dust/analysistime', { params: params }).then((response) => {
      statisticApi.fetchDayStatisticByOrder(params).then((response) => {
        this.tableData = response.data.data.rows
        this.loading = false
        this.queryButton = false
@@ -171,92 +184,97 @@
      })
    },
    openDetail(row) {
      const encodedSiteName = encodeURIComponent(row.siteName)
      let titleName = '站点风险数据详情'
      this.$router.push(`/detail/${encodedSiteName}/${this.form.month}/${titleName}`)
      const encodedSiteName = encodeURIComponent(row.name)
      const timeType = '0'
      const jumpPage = '2'
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${row.lst}/${timeType}/${jumpPage}`)
    }
  }
}
</script>

<template>
    <el-form :inline="true" :model="form" ref="h1">
      <el-form-item>
        <AreaAndmonitorType></AreaAndmonitorType>
      </el-form-item>

      <el-form-item>
        <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
      </el-form-item>

      <el-form-item>
        <ButtonClick
          style="margin-right: 12px"
          content="数据排名"
          type="primary"
          :loading="queryButton"
          @do-search="fetchData"
        ></ButtonClick>
        <ButtonExportExcel
          content="导出数据"
          type="success"
          :loading="exportButton"
          @do-export="exportData"
        ></ButtonExportExcel>
      </el-form-item>
    </el-form>

    <el-card v-show="!isNoData">
      <el-table
        :data="tableData"
        :height="tableHeight"
        style="width: 100%"
        v-loading="loading"
        :cell-class-name="tableCellClassName"
      >
        <el-table-column
          type="index"
          prop="name"
          label="序号"
          :index="indexMethod"
          fixed
          show-overflow-tooltip
        />
        <el-table-column prop="name" label="点位名称" show-overflow-tooltip width="300">
            <template #default="{ row }">
              <el-button type="primary" text   @click="openDetail(row)">
              <span class="rank-site">{{row.name
              }}</span></el-button>
            </template>
        </el-table-column>

        <el-table-column prop="mnCode" label="设备编码" show-overflow-tooltip />

        <el-table-column prop="lst" label="监测日期" sortable show-overflow-tooltip />

        <el-table-column prop="dayAvg" label="日平均值" sortable show-overflow-tooltip />
        <el-table-column prop="min" label="日最小值" sortable show-overflow-tooltip />
        <el-table-column prop="max" label="日最大值" sortable show-overflow-tooltip />

        <el-table-column prop="dayOnline" label="日在线率" sortable show-overflow-tooltip />

        <el-table-column prop="dayValid" label="日有效率" sortable show-overflow-tooltip />

        <el-table-column prop="dayExceeding" label="日超标率" sortable show-overflow-tooltip />
      </el-table>

      <el-pagination
        ref="h2"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total,sizes, prev, pager, next, jumper"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
  <el-form :inline="true" :model="form" ref="h1">
    <el-form-item>
      <AreaAndmonitorType></AreaAndmonitorType>
    </el-form-item>
    <el-form-item>
      <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
    </el-form-item>
    <el-form-item>
      <ButtonClick
        style="margin-right: 12px"
        content="数据排名"
        type="primary"
        :loading="queryButton"
        @do-search="fetchData"
      ></ButtonClick>
      <ButtonExportExcel
        content="导出数据"
        type="success"
        :loading="exportButton"
        @do-export="exportData"
      ></ButtonExportExcel>
    </el-form-item>
  </el-form>
  <el-card v-show="!isNoData">
    <el-table
      :data="tableData"
      :height="tableHeight"
      style="width: 100%"
      v-loading="loading"
      :cell-class-name="tableCellClassName"
      @sort-change="fetchData"
    >
      <el-table-column
        type="index"
        prop="name"
        label="序号"
        :index="indexMethod"
        fixed
        show-overflow-tooltip
      />
    </el-card>
    <el-empty v-show="isNoData" :image-size="200" />
      <el-table-column prop="name" label="点位名称" show-overflow-tooltip width="300">
        <template #default="{ row }">
          <el-button type="primary" text @click="openDetail(row)">
            <span class="rank-site">{{ row.name }}</span></el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="mnCode" label="设备编码" show-overflow-tooltip />
      <el-table-column prop="lst" label="监测日期" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="dayAvg" label="日平均值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="min" label="日最小值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="max" label="日最大值" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="dayOnline" label="日在线率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayOnline) }}
        </template>
      </el-table-column>
      <el-table-column prop="dayValid" label="日有效率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayValid) }}
        </template>
      </el-table-column>
      <el-table-column prop="dayExceeding" label="日超标率" sortable="custom" show-overflow-tooltip>
        <template #default="{ row }">
          {{ percentFormatter(row.dayExceeding) }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      ref="h2"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total,sizes, prev, pager, next, jumper"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      @update:current-page="handleCurrentChange"
      @update:page-size="handleSizeChange"
    />
  </el-card>
  <el-empty v-show="isNoData" :image-size="200" />
</template>

<style scoped>