消息通知数据自动筛选

spring

2025-05-21 ee2882cff02d3545b66c7591f88ed4800f730a9a

 src/components/view/b4-site-hours-statistics.vue

@@ -5,32 +5,56 @@
      <el-date-picker
        v-model="month"
        type="month"
        placeholder="选择月" style="margin-right: 20px;" @change="changeTime">
        placeholder="选择月"
        style="margin-right: 20px;"
        @change="changeTime"
      >
      </el-date-picker>
    </div>
    <el-row :gutter="20" class="card" v-loading="loading">
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-for="(item,index) in siteList" :key="index">
        <div class="card-item" :style="`background: url(../../../static/img/site/bg-${item.bg}.png) no-repeat;background-size:100% 100%;margin-bottom:16px`">
          <h3 :style="`color:${item.color};font-weight: 500;font-size: 28px;`" class="card-item-title">
            <img :src="`../../../static/img/site/${item.name}.png`" alt="" style="width: 30px;height: 30px;margin-right: 10px;">
      <el-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="8"
        :xl="8"
        v-for="(item, index) in siteList"
        :key="index"
      >
        <div
          class="card-item"
          :style="
            `background: url(../../../static/img/site/bg-${item.bg}.png) no-repeat;background-size:100% 100%;margin-bottom:16px`
          "
        >
          <h3
            :style="`color:${item.color};font-weight: 500;font-size: 28px;`"
            class="card-item-title"
          >
            <img
              :src="`../../../static/img/site/${item.name}.png`"
              alt=""
              style="width: 30px;height: 30px;margin-right: 10px;"
            />
            <span>{{ item.name }}站点</span>
          </h3>
          <el-table
            :data="item.tableData"
            style="width: 100%;margin-bottom: 14px;" height="410px" size="mini"border v-loading="item.loading">
            <el-table-column
              type="index"
              label="序号"
              width="60">
            style="width: 100%;margin-bottom: 14px;"
            height="410px"
            size="mini"
            border
            v-loading="item.loading"
          >
            <el-table-column type="index" label="序号" width="60">
              <template #default="scope">
              <!-- 计算序号 -->
              {{ (item.page.current - 1) * item.page.size + scope.$index + 1 }}
            </template>
                <!-- 计算序号 -->
                {{
                  (item.page.current - 1) * item.page.size + scope.$index + 1
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="sampleName"
              label="样品名称"
              width="90">
            <el-table-column prop="sampleName" label="样品名称" width="90">
              <template #default="scope">
                <el-tooltip
                  class="item"
@@ -38,13 +62,13 @@
                  :content="scope.row.sampleName"
                  placement="top"
                >
                  <div class="single-line-ellipsis">{{ scope.row.sampleName }}</div>
                  <div class="single-line-ellipsis">
                    {{ scope.row.sampleName }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="sampleCode"
              label="样品编号">
            <el-table-column prop="sampleCode" label="样品编号">
              <template #default="scope">
                <el-tooltip
                  class="item"
@@ -52,17 +76,15 @@
                  :content="scope.row.sampleCode"
                  placement="top"
                >
                  <div class="single-line-ellipsis">{{ scope.row.sampleCode }}</div>
                  <div class="single-line-ellipsis">
                    {{ scope.row.sampleCode }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="num"
              label="次数" width="70">
            <el-table-column prop="num" label="次数" width="70">
            </el-table-column>
            <el-table-column
              prop="hours"
              label="检验时长" width="100">
            <el-table-column prop="hours" label="检验时长" width="100">
            </el-table-column>
          </el-table>
          <el-pagination
@@ -70,7 +92,11 @@
            :page-size="item.page.size"
            :current-page="item.page.current"
            layout="prev, pager, next"
            :total="item.page.total" small style="text-align: right;" @current-change="m=>changePage(m,item)">
            :total="item.page.total"
            small
            style="text-align: right;"
            @current-change="m => changePage(m, item)"
          >
          </el-pagination>
        </div>
      </el-col>
@@ -80,251 +106,255 @@

<script>
export default {
  data(){
  data() {
    return {
      month:'',
      siteList:[
      month: "",
      siteList: [
        {
          name:'电路试验',
          color:'#FABE63',
          bg:'黄色',
          tableData:[],
          page:{
          name: "电路试验",
          color: "#FABE63",
          bg: "黄色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'远场',
          color:'#6F83FF',
          bg:'紫色',
          tableData:[],
          page:{
          name: "远场",
          color: "#6F83FF",
          bg: "紫色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'近场',
          color:'#53B3F9',
          bg:'蓝色',
          tableData:[],
          page:{
          name: "近场",
          color: "#53B3F9",
          bg: "蓝色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'振动',
          color:'#6F83FF',
          bg:'紫色',
          tableData:[],
          page:{
          name: "振动",
          color: "#6F83FF",
          bg: "紫色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'淋雨',
          color:'#53B3F9',
          bg:'蓝色',
          tableData:[],
          page:{
          name: "淋雨",
          color: "#53B3F9",
          bg: "蓝色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'高低温',
          color:'#80CD62',
          bg:'绿色',
          tableData:[],
          page:{
          name: "高低温",
          color: "#80CD62",
          bg: "绿色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'盐雾',
          color:'#6F83FF',
          bg:'紫色',
          tableData:[],
          page:{
          name: "盐雾",
          color: "#6F83FF",
          bg: "紫色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'风载',
          color:'#53B3F9',
          bg:'蓝色',
          tableData:[],
          page:{
          name: "风载",
          color: "#53B3F9",
          bg: "蓝色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'跌落',
          color:'#FABE63',
          bg:'黄色',
          tableData:[],
          page:{
          name: "跌落",
          color: "#FABE63",
          bg: "黄色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'老化',
          color:'#80CD62',
          bg:'绿色',
          tableData:[],
          page:{
          name: "老化",
          color: "#80CD62",
          bg: "绿色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'静压',
          color:'#53B3F9',
          bg:'蓝色',
          tableData:[],
          page:{
          name: "静压",
          color: "#53B3F9",
          bg: "蓝色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'冲击',
          color:'#6F83FF',
          bg:'紫色',
          tableData:[],
          page:{
          name: "冲击",
          color: "#6F83FF",
          bg: "紫色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
          loading: false
        },
        {
          name:'功率容量',
          color:'#80CD62',
          bg:'绿色',
          tableData:[],
          page:{
          name: "功率容量",
          color: "#80CD62",
          bg: "绿色",
          tableData: [],
          page: {
            current: 1,
            size: 9,
            total:0
            total: 0
          },
          loading:false,
        },
          loading: false
        }
      ],
      startTime:null,
      endTime:null,
      loading:false,
    }
      startTime: null,
      endTime: null,
      loading: false
    };
  },
  mounted(){
    this.month = new Date()
    this.changeTime()
  mounted() {
    this.month = new Date();
    this.changeTime();
  },
  methods:{
    init(){
      this.loading = true
      this.$axios.post(this.$api.report.timeByStation, {
        startTime:this.startTime,
        endTime:this.endTime,
        current: 1,
        size: 9
      }).then(res => {
        this.loading = false
        if (res.code === 201) {
          return
        }
        for(let m in res.data){
          this.siteList.forEach(item=>{
            if(item.name==m){
              item.page.total = res.data[m].total
              item.tableData = res.data[m].records
            }
          })
        }
      })
  methods: {
    init() {
      this.loading = true;
      this.$axios
        .post(this.$api.report.timeByStation, {
          startTime: this.startTime,
          endTime: this.endTime,
          current: 1,
          size: 9
        })
        .then(res => {
          this.loading = false;
          if (res.code === 201) {
            return;
          }
          for (let m in res.data) {
            this.siteList.forEach(item => {
              if (item.name == m) {
                item.page.total = res.data[m].total;
                item.tableData = res.data[m].records;
              }
            });
          }
        });
    },
    changePage(current,row){
      row.page.current = current
      row.loading = true
      this.$axios.post(this.$api.report.timeByStation, {
        startTime:this.startTime,
        endTime:this.endTime,
        current: current,
        size: row.page.size,
        sonLaboratory:row.name
      }).then(res => {
        row.loading = false
        if (res.code === 201) {
          return
        }
        row.tableData = res.data[row.name].records
        row.page.total = res.data[row.name].total
      })
    changePage(current, row) {
      row.page.current = current;
      row.loading = true;
      this.$axios
        .post(this.$api.report.timeByStation, {
          startTime: this.startTime,
          endTime: this.endTime,
          current: current,
          size: row.page.size,
          sonLaboratory: row.name
        })
        .then(res => {
          row.loading = false;
          if (res.code === 201) {
            return;
          }
          row.tableData = res.data[row.name].records;
          row.page.total = res.data[row.name].total;
        });
    },
    changeTime(){
    changeTime() {
      const year = new Date(this.month).getFullYear();
      const month = new Date(this.month).getMonth()+1;
      const month = new Date(this.month).getMonth() + 1;
      const day = new Date(year, month + 1, 0).getDate(); //
      // 设置起始日期和结束日期
      this.startTime = `${year}-${month>9?'0'+month:month}-01`
      this.endTime = `${year}-${month>9?'0'+month:month}-${day}` // 月末
      this.siteList.forEach(item=>{
        item.page.current = 1
      })
      this.init()
      this.startTime = `${year}-${month > 9 ? "0" + month : month}-01`;
      this.endTime = `${year}-${month > 9 ? "0" + month : month}-${day}`; // 月末
      this.siteList.forEach(item => {
        item.page.current = 1;
      });
      this.init();
    }
  }
}
};
</script>

<style scoped>
.title{
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.card{
.card {
  height: calc(100vh - 156px);
  overflow-y: auto;
}
.card-item{
.card-item {
  height: 540px;
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.05);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
  padding: 20px 10px 10px 20px;
  box-sizing: border-box;
}
.card-item-title{
.card-item-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;