large-vue/src/views/screen/engineering/issueListDia.vue

<template>
  <div class="myDia">
    <!-- 日期选择器和其他操作 -->
    <div style="margin-bottom: 26px;display: flex;position: relative;width: 100%" class="dataPlicker">
      <el-date-picker
        v-model="value"
        type="date"
        placeholder="选择日期"
        @change="handleDateChange">
      </el-date-picker>
      <div class="choose-area">
      <el-select v-model="food" placeholder="请选择" @change="changeFoods">
        <el-option
          v-for="item in foods"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
      <!-- <div style="border: 1px #00ffff solid;display: flex;justify-content: center;align-items: center;margin-left: 10px;width: 100px;color: #00ffff;cursor: pointer" @click="choose">
        <i class="el-icon-plus"><span style="margin-left: 10px">上报问题</span></i>
      </div> -->
      <div style="position: absolute;right: 10px;color: #00ffff;font-size: 25px;cursor: pointer" @click="close">
        <img src="../../../assets/zhang/engineer/ownCloseBtn.png">
      </div>
    </div>

    

    <!-- 表格数据 -->
    <div class="flex-container">
      <div class="header">
        <div class="flex-column" style="width: 15%">时间</div>
        <div class="flex-column" style="width: 15%">标题</div>
        <div class="flex-column" style="width: 30%">问题内容</div>
        <div class="flex-column" style="width: 15%">发起人</div>
        <div class="flex-column" style="width: 10%">问题状态</div>
        <div class="flex-column" style="width: 15%">操作</div>
      </div>
      <div class="flex-row" v-for="(item, index) in paginatedData" :key="index">
        <div class="flex-column" style="width: 15%">{{ item.createDate }}</div>
        <div class="flex-column" style="width: 15%">{{ item.title }}</div>
        <div class="flex-column" style="width: 30%">{{ item.description }}</div>
        <div class="flex-column" style="width: 15%">{{ item.person }}</div>
        <div class="flex-column" style="width: 10%">
          <span v-if="item.status == 1"><span style="color: #67C23A">●</span> 已完结</span>
          <span v-if="item.status == 0"><span style="color: #FAAD14">●</span> 处理中</span>
        </div>
        <div class="flex-column" style="width: 15%">
          <span v-if="item.status == 1"></span>
          <span v-if="item.status == 0" style="color: #00FFFF;cursor: pointer" @click="dealIssue(item)">变更状态</span>
          <div v-if="item.status == 0&&item.isShowPost" class="wanjie" @click="changeIssueStatus(item.id)">已完结</div>
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <div style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 10px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getIssueListLastWeek,changeIssueStatus } from '@/api/screen/service';

export default {
  name: "UnitCamera",
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  data() {
    return {
      value: null,
      food: "",
      foods: ["处理中", "已完结",],
      getProList: [],
      // showPost:false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.getProList.slice(start, end);
    },
  },
  created() {
    this.fetchData();
  },
  mounted() {
  const style = document.createElement('style');
  style.innerHTML = `
    .el-picker-panel.el-date-picker {
      background: #062223 !important;
    }
  `;
  document.head.appendChild(style);
},
methods: {
  dealIssue(y){
    this.$emit('dealIssue',y)
  },

    // 获取近一周问题列表
    fetchData() {
    let selectedFood = null;
    let selectedDate = null;

    if (this.food) {
      selectedFood = this.food === "处理中" ? 0 : 1;
    }
    if (this.value) {
      selectedDate = this.formatDate(this.value);
    }

    getIssueListLastWeek(this.$props.appOrg, selectedDate, selectedFood).then((res) => {
      if (Number(res.code) === 200) {
        this.getProList = (res.data || []).map(item => ({
          ...item,
          isShowPost: false
        }));
        this.total = this.getProList.length;
      }
    }).catch(error => {
      console.error("Error fetching data:", error);
    });
  },
    // 日期格式化方法
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // 处理日期选择器变化
    handleDateChange(value) {
      this.value = value;
      this.currentPage = 1; // 重置分页
      this.fetchData(); // 刷新数据
    },
    changeFoods(food) {
      this.food = food;
      this.currentPage = 1; // 重置分页
      this.fetchData();// 刷新数据
    },

    togglePost(item) {
      // 关闭所有其他条目
      this.getProList.forEach(i => {
        if (i.id !== item.id) i.isShowPost = false;
      });
      // 切换当前条目状态
      item.isShowPost = !item.isShowPost;
    },
    changeIssueStatus(f) {
      const issueData = {
        id: f,
        status: 1,
      };

      changeIssueStatus(issueData).then((res) => {
        if (Number(res.code) === 200) {
          this.getIssueListLastWeek(); // 刷新数据
        }
      }).catch((err) => {
        console.error("修改状态失败：", err);
      });
    },
    close() {
      this.$emit("close");
    },
    handlePageChange(page) {
      this.currentPage = page; // 更新当前页码
    },
  },
};
</script>
<style lang="scss" scoped>
.me{
  display: flex;flex-wrap: wrap;justify-content: space-around;height: 380px;overflow: auto;
}
.me::-webkit-scrollbar {
  display: none;
}

.flex-container {
  width: 100%;
  height: 566px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
}

.header{
  display: flex;  /* 每行使用 flexbox 布局 */
  position: relative;
  background-color: rgba(21, 105, 107, 0.5);
}

.flex-row {
  display: flex;  /* 每行使用 flexbox 布局 */
  position: relative;
}
.choose-area {
  margin-left: 20px;
    width: 91.05px;
    height: 35px;
    line-height: 30px;
    /* padding-left: 15px; */
    font-size: 14px;
    color: #00ffff;
    background: url("../../../assets/images/main/choose_short.png") no-repeat;
    cursor: pointer;
    background-size: 100%;
  }

  .choose-area {
    .el-select {
      width: 100%;
    }
    .el-input {
      input {
        background: rgba(255, 255, 255, 0);
        color: #00ffff;
        border: none;
        padding: 0;
        width: 50px;
      }
    }
  }

.flex-row::before{
  content: "";
  height: 15px;
  border-left: 2px #00FFFF solid;
  position: absolute;
  left: 0;
  top: 15px
}

.flex-column {
  display: flex;
  justify-content: center;
  height: 46px;
  padding: 8px 12px;
  text-align: left;  /* 左对齐文本 */
  color: white;
}

.header .flex-column {
  color: #00ffff;
}

.el-scrollbar {
  background: #15696b;
  border: 1px solid #00ffff;
  ul {
    li {
      color: #fff;
    }
  }
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #15696b;
  color: #00ffff;
}
.el-select-dropdown__item.selected {
  color: #00ffff;
}
.el-select .el-input .el-select__caret {
  display: none;
}
.choose-area .el-select[data-v-856d8f0c] {
    width: 100%;
}
.myDia{
  width: 1050px;
  height: 710px;
  padding: 24px 35px ;
  background-image: radial-gradient(circle at 50% 50%, #031417b3 0%, #0C1A1A 84%);
}
.myDia ::v-deep .el-picker-panel.el-date-picker {
    background: #062223 !important;
}
.wanjie{
  position: absolute;
    /* left: 30px; */
    margin-left: 75px;
    top: 25px;
    width: 120px;
    height: 60px;
    background: #0017168f;
    box-shadow: inset 0 0 17px 0 #05ffff7a;
    background: #44f1ff1a;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00F0ff;
    cursor: pointer;
}

::v-deep .el-input__inner{
  color: #00ffff;
  background-color: rgba(15, 86, 86, 0.54);
  border: 1px solid #00ffff4d;
}
::v-deep .el-input__prefix{
  color: #00F6EC;
}
::v-deep .el-input__suffix{
  color: #00F6EC;
}
::v-deep .el-input__inner::placeholder{
  color: #199294;
}
::v-deep .btn-prev{
  color: #00F6EC !important;
  background-color: rgba(21, 105, 107, 0.35) !important;
  border: 1px #15696b solid;
}
::v-deep .btn-next{
  color: #00F6EC !important;
  background-color: rgba(21, 105, 107, 0.35) !important;
  border: 1px #15696b solid;
}
::v-deep .el-pager li.active{
  background-color: #00ffff !important;
  color: rgba(9, 8, 8, 0.68) !important;
}
::v-deep .el-pager li{
  background-color: rgba(21, 105, 107, 0.35) !important;
  color: #00ffff !important;
}
</style>