admin-fiveFollowing/src/views/alarmManage/index.vue

<template>
  <div class="app-container alarmingManage" v-if="pageShow">
    <!-- 筛选start -->
    <div class="filter-container mb-10">
      <div class="left">
        <div>
          <div class="filter-item">
            站点:
            <el-select
              v-model="store.state.siteId"
              placeholder="请选择"
              style="width: 200px"
              clearable
              filterable
            >
              <el-option
                v-for="item in store.state.siteList"
                :key="item.id"
                :label="item.siteName"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="filter-item">
            时间：
            <el-date-picker
              v-model="dateValue"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: auto"
        
            ></el-date-picker>
          </div>
          <el-button
            class="search-button"
            @click=";(store.state.siteId = ''), (dateValue = ''), listSelect()"
          >
            重置
          </el-button>
          <el-button type="primary" class="search-button" @click="listSelect()">
            搜索
          </el-button>
        </div>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :cell-style="cellStyle"
      class="alarmingTable"
    >
      <el-table-column prop="siteName" label="站点名称" width="">
        <template #default="scope">
          <div @click="handleClick(scope.row)">{{ scope.row.siteName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="totalGrade" label="总数">
        <template #default="scope">
          <span
            class="gradualBg total"
            :class="{ transparent: scope.row.totalGrade == 0 }"
            :style="{
              width:
                (scope.row.totalGrade / allMaxData.totalNumMax) * 100 + '%',
            }"
             style="min-width:35px!important"
            @click="goAlarmTotal(0, scope.row.siteName, scope.row.siteId)"
          >
            {{ scope.row.totalGrade }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="oneGrade" label="一级告警" width="">
        <template #default="scope">
          <span
            class="gradualBg"
            :class="{ transparent: scope.row.oneGrade == 0 }"
            :style="{
              width:
                (scope.row.oneGrade / allMaxData.oneAlarmingMax) * 100 + '%',
            }"
             style="min-width:35px!important"
            @click="goAlarmTotal(1, scope.row.siteName, scope.row.siteId)"
          >
            {{ scope.row.oneGrade }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="twoGrade" label="二级告警" width="">
        <template #default="scope">
          <span
            class="gradualBg"
            :class="{ transparent: scope.row.twoGrade == 0 }"
            :style="{
              width:
                (scope.row.twoGrade / allMaxData.twoAlarmingMax) * 100 + '%'
            }"
            style="min-width:35px!important"
            @click="goAlarmTotal(2, scope.row.siteName, scope.row.siteId)"
          >
            {{ scope.row.twoGrade }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="other" label="其他" width=""></el-table-column> -->
      <el-table-column prop="otherGrade" label="其他" width="">
        <template #default="scope">
          <span
            class="gradualBg"
            :class="{ transparent: scope.row.otherGrade == 0 }"
            :style="{
              width: (scope.row.otherGrade / allMaxData.otherMax) * 100 + '%',
            }"
            @click="goAlarmTotal(3, scope.row.siteName, scope.row.siteId)"
          >
            {{ scope.row.otherGrade }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 分页end -->

    <!-- {{ totalNumMax }}
      {{ oneAlarmingMax }} -->
  </div>
  <alarm-total
    v-else
    :pageShow="pageShow"
    @func="goAlarmTotal"
    :alarmGradeList="alarmGradeList"
  ></alarm-total>
</template>

<script>
import alarmTotal from './alarmTotal'
import { useStore } from 'vuex'
import { computed, defineComponent, onMounted, ref } from 'vue'
import * as api from '@/api/alarmManage/index'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: { alarmTotal },
  name: 'VariableList',
  setup() {
    const store = useStore()
    const router = useRouter()

    const pageShow = ref(true)
    const alarmGradeList = ref({})
    // const dateValue = ref([new Date(2020, 10, 10, 10, 10), new Date()])
    const dateValue = ref('')

    const total = ref(0)
    const pageSize = ref(15)
    const currentPage = ref(1)
    const tableData = ref([])

    //查询
    function listSelect() {
      store.commit('TimeAll_function', dateValue.value)
      api
        .alarmGradeCount({
          startTime: store.state.Time_Data[0],
          endTime: store.state.Time_Data[1],
          siteId: store.state.siteId,
          size: pageSize.value,
          current: currentPage.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            total.value = requset.data.total
            tableData.value = requset.data.records
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    //查看
    const handleClick = (row) => {
      // alert('查看对应站点（页面跳转）')
      console.log(row)
    }

    const goVariableList = () => {
      // 跳转至订单列表页面传参
      router.push({
        path: '../siteManage/variableList/index.vue',
      })
      // this.$router.push({ name:'variableList'})
    }

    const goAlarmTotal = (val, val1, val2) => {
      pageShow.value = !pageShow.value
      store.commit('TimeAll_function', dateValue.value)
      if (val != undefined) {
        alarmGradeList.value = {
          startTime: store.state.Time_Data[0],
          endTime: store.state.Time_Data[1],
          type: val,
          siteName: val1,
          siteId: val2,
        }
      }
    }

    onMounted(() => {
      listSelect()
      // console.log(store, router)
    })

    //条数
    const handleSizeChange = (val) => {
      pageSize.value = val
      listSelect()
    }
    //页数
    const handleCurrentChange = (val) => {
      currentPage.value = val
      listSelect()
    }

    const allMaxData = computed(() => {
      var allMaxData = {}

      var totalNumData = []
      var oneAlarmingData = []
      var twoAlarmingData = []
      var otherData = []

      tableData.value.forEach((element, index) => {
        totalNumData[index] = element.totalGrade
        oneAlarmingData[index] = element.oneGrade
        twoAlarmingData[index] = element.twoGrade
        otherData[index] = element.otherGrade
      })

      allMaxData.totalNumMax = Math.max.apply(Math, totalNumData)
      allMaxData.oneAlarmingMax = Math.max.apply(Math, oneAlarmingData)
      allMaxData.twoAlarmingMax = Math.max.apply(Math, twoAlarmingData)
      allMaxData.otherMax = Math.max.apply(Math, otherData)

      return allMaxData
    })

    //自定义列样式
    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
      row, column, rowIndex
      // console.log(row, column, rowIndex)
      if (columnIndex !== 0) {
        return `color:#0284E8;cursor:pointer`
      }
      if (columnIndex) {
        // return `text-align:left;cursor:pointer;`
      } else {
        return ''
      }
    }
    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA;'
    }
    return {
      headClass,
      goVariableList,
      handleCurrentChange,
      handleSizeChange,
      cellStyle,
      handleClick,
      goAlarmTotal,
      listSelect,

      store,
      pageShow,
      dateValue,

      total,
      pageSize,
      currentPage,
      tableData,
      alarmGradeList,

      showDialog: false,
      tabPosition: 'one',

      input: '',
      region: '',
      allMaxData,
    }
  },
})
</script>

<style lang="scss" scoped>
</style>