ops-fronted-java/src/views/activityList/index.vue

<template>
  <div class="activityBox">
    <div class="uploadForm">
      <div class="noteBox">
        <h3 class="lableBox">活动名称：</h3>
        <el-input
          class="noteClass"
          v-model="activityForm.title"
          placeholder="输入活动名称"
          @focus="inputfocus"
        ></el-input>
        <p class="redErr" v-if="titleFlag">*请输入活动名称</p>
      </div>
      <div class="upgradeBox">
        <h3 class="lableBox">装置列表：</h3>
        <el-input
          type="textarea"
          :rows="22"
          placeholder="请输入装置列表"
          v-model="activityForm.cmdidArr"
          @focus="textfocus"
        >
        </el-input>
        <p class="redErr" v-if="cmdidFlag">*请输入活动名称</p>
      </div>
      <el-button
        class="uploadBtn"
        size="small"
        type="primary"
        @click="submitUpload"
        >上传活动列表</el-button
      >
    </div>
    <div class="activityList">
      <el-table
        :data="activityData"
        style="width: 100%"
        border
        stripe
        height="calc(100% - 0px)"
        v-loading="activityloading"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
        ></el-table-column>
        <el-table-column prop="title" label="活动名称"> </el-table-column>
        <el-table-column prop="termCount" label="装置数量">
          <template slot-scope="scope">
            {{ scope.row.termCount }}
          </template>
        </el-table-column>
        <el-table-column prop="lostCount" label="掉线数量">
          <template slot-scope="scope">
            {{ scope.row.lostCount }}
          </template>
        </el-table-column>
        <el-table-column prop="lostCount" label="在线率">
          <template slot-scope="scope">
            {{
              (
                ((scope.row.termCount - scope.row.lostCount) /
                  scope.row.termCount) *
                100
              ).toFixed(2)
            }}%
          </template>
        </el-table-column>
        <!-- <el-table-column prop="path" label="文件路径"> </el-table-column> -->
        <el-table-column label="操作" width="300" class-name="editClass">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="handleEditClick(scope.row)"
              size="small"
              icon="el-icon-document"
              >修改</el-link
            >
            <el-link
              type="primary"
              @click="handleLookClick(scope.row)"
              size="small"
              icon="el-icon-document"
              >详情</el-link
            >
            <el-link
              type="danger"
              @click="handleDeleteClick(scope.row)"
              size="small"
              icon="el-icon-delete"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      class="termsDialog"
      :title="activityName"
      :visible.sync="termsShow"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-button class="exportBtn" type="primary" @click="handleExport"
        >导出活动列表</el-button
      >
      <el-table
        ref="activityTable"
        id="activityTable"
        :data="termsData"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        border
        stripe
        height="600px"
        v-loading="activityloading"
        @header-click="handleHeaderClick"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="lineName" label="线路名称"> </el-table-column>
        <el-table-column prop="towerName" label="杆塔名称"> </el-table-column>
        <el-table-column prop="cmdid" label="装置编号">
          <template slot="header" slot-scope="scope">
            装置编号<el-tag
              type="success"
              style="cursor: pointer; margin-left: 8px"
              >复制列</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="protocol" label="规约">
          <template slot-scope="scope">
            {{ protocolMap[scope.row.protocol] }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="termsShow = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getActivityApi,
  addActiveApi,
  updActiveApi,
  delActiveApi,
} from "@/utils/api/index";
import htmlToExcel from "@/utils/htmlToExcel";
import { saveAs } from "file-saver";
import XLSX from "xlsx";
export default {
  name: "activity",
  components: {},
  data() {
    return {
      activityloading: true,
      activityData: [], //活动列表
      activityForm: {
        title: "",
        cmdidArr: "",
      },
      cmdObjects: [], // 用于存储转换后的对象数组
      titleFlag: false, //title为空
      cmdidFlag: false, //cmdid为空
      termsShow: false,
      termsData: [],
      termsLoading: true,
      activityName: "",
      activityNameTitle: "",
      protocolMap: {
        65280: "国网I1",
        65296: "陕西",
        65281: "安徽",
        65282: "江苏",
        65283: "湖南",
        65284: "浙江",
        65285: "河南全景",
        65286: "河南郑州",
        65290: "河南统一视频v2020",
        65298: "宁夏",
        2: "南网",
      },
      ActibityId: "", //判断是否是修改
    };
  },
  computed: {},
  watch: {
    "activityForm.cmdidArr": {
      handler(newVal) {
        // 每当 activityForm.cmdidArr 发生变化时，调用 convertToCmdObjects 方法
        this.cmdObjects = this.convertToCmdObjects(newVal);
      },
      deep: false, // 不需要深度监听，因为我们直接监听的是字符串
      immediate: false, // 不需要立即触发一次 handler 函数
    },
  },
  mounted() {
    this.getactivityList();
  },
  methods: {
    convertToCmdObjects(text) {
      // 去除文本首尾的空白字符，并按换行符分割成数组
      const cmdids = text.trim().split(/\r?\n/);
      // 映射每个 cmdid 到一个对象，并返回对象数组
      return cmdids.map((cmdid) => ({ cmdid }));
    },
    async handleHeaderClick(column) {
      console.log(column);
      // 获取当前列的数据字段名
      const dataField = column.property;
      // 获取当前列的所有数据值
      const columnData = this.termsData.map((row) => row[dataField]);
      console.log(`当前列数据字段：${dataField}`);
      console.log(`当前列数据值：${columnData}`);
      this.copyToClipboard(columnData.join("\n"));
      console.log(columnData);
      // this.activityForm.cmdidArr = columnData.join("\n");
      // this.activityForm.title = this.activityNameTitle;
      //this.termsShow = false;
    },
    copyToClipboard(text) {
      const textArea = document.createElement("textarea");
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      try {
        const successful = document.execCommand("copy");
        const msg = successful ? "成功复制到剪贴板" : "复制失败";
        console.log(msg);
        this.$message({
          duration: 1500,
          showClose: true,
          message: msg,
          type: "success",
        });
      } catch (err) {
        console.error("复制失败:", err);
      } finally {
        document.body.removeChild(textArea);
      }
    },
    //导出活动列表表格
    handleExport() {
      htmlToExcel.getExcel("#activityTable", "设备活动列表");
    },
    //获取活动列表
    getactivityList() {
      this.activityloading = true;
      this.activityData = [];
      getActivityApi()
        .then((res) => {
          console.log(res);
          this.activityData = res.data;
          this.activityloading = false;
        })
        .catch((err) => {});
    },

    //活动详情
    handleLookClick(row) {
      console.log(row);
      this.termsShow = true;
      this.termsLoading = true;
      this.termsData = row.terms;
      this.activityNameTitle = row.title;
      this.activityName = row.title + "(" + row.terms.length + ")";
      this.termsData = row.terms;
    },
    //删除该活动
    handleDeleteClick(row) {
      console.log(row);
      delActiveApi({
        id: row.id,
      })
        .then((res) => {
          console.log(res);
          this.$confirm("此操作将永久删除该活动, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                duration: 1500,
                showClose: true,
                message: "活动删除成功",
                type: "success",
              });
              this.getactivityList();
            })
            .catch(() => {});
        })
        .catch((err) => {});
    },
    //title获取焦点时触发
    inputfocus() {
      this.titleFlag = false;
    },
    //text获取焦点时触发
    textfocus() {
      this.cmdidFlag = false;
    },
    //修改活动详情
    handleEditClick(row) {
      console.log(row);
      this.ActibityId = row.id;
      this.activityForm.title = row.title;
      const columnData = row.terms.map((item) => item.cmdid);
      this.activityForm.cmdidArr = columnData.join("\n");
    },
    //上传活动列表
    submitUpload() {
      if (this.activityForm.title == "") {
        this.titleFlag = true;
        return;
      }
      if (this.activityForm.cmdidArr == "") {
        this.cmdidFlag = true;
        return;
      }
      let actParams = {};
      if (this.ActibityId !== "") {
        //修改
        console.log(this.ActibityId);
        actParams = {
          id: this.ActibityId,
          title: this.activityForm.title,
          terms: this.cmdObjects,
        };
        updActiveApi(actParams)
          .then((res) => {
            console.log(res);
            this.getactivityList();
            this.activityForm.title = "";
            this.activityForm.cmdidArr = "";
            this.ActibityId = "";
          })
          .catch((err) => {});
      } else {
        //新增
        console.log(this.cmdObjects);
        actParams = {
          title: this.activityForm.title,
          terms: this.cmdObjects,
        };
        addActiveApi(actParams)
          .then((res) => {
            console.log(res);
            this.getactivityList();
            this.activityForm.title = "";
            this.activityForm.cmdidArr = "";
            this.ActibityId = "";
          })
          .catch((err) => {});
      }
    },
  },
};
</script>
<style lang="less">
.activityBox {
  height: calc(100% - 24px);
  width: calc(100% - 24px);
  padding: 12px;
  display: flex;
  .uploadForm {
    min-width: 300px;
    margin-right: 20px;

    .noteBox {
      margin-bottom: 16px;
      position: relative;
      .noteClass {
        width: 100%;
      }
      .lableBox {
        font-size: 14px;
        font-weight: normal;
        width: 78px;
        line-height: 32px;
      }
      .redErr {
        position: absolute;
        font-size: 12px;
        color: red;
      }
    }
    .upgradeBox {
      position: relative;
      .lableBox {
        font-size: 14px;
        font-weight: normal;
        width: 78px;
        line-height: 32px;
      }
      .redErr {
        position: absolute;
        font-size: 12px;
        color: red;
      }
    }
    .uploadBtn {
      margin-top: 16px;
      margin-left: auto;
      display: flex;
    }
  }

  .activityList {
    height: calc(100% - 0px);
    flex: 1;
    min-width: 0;
    .el-table {
      .el-table__cell {
        text-align: center;
      }
    }
  }
  .editClass {
    .el-link.el-link--primary {
      margin-right: 14px;
    }
  }
  .termsDialog {
    .el-dialog {
      margin-top: 0 !important;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .exportBtn {
      position: absolute;
      z-index: 1;
      top: 16px;
      right: 66px;
    }

    .el-dialog__body {
      padding: 12px;
    }
  }
}
.el-dialog__headerbtn {
  top: 18px;
  .el-dialog__close {
    font-size: 26px;
    &:hover {
      background: #e2e2e2;
    }
  }
}
</style>