real3d-portalsite/src/views/ConstructionApplication3D/billboard/billboardJTList.vue

<template>
  <div class="ZTGlobal" style="height: 100%; width: 100%; padding: 5px">
    <el-container style="height: 100%">
      <el-header height="50px">
        <el-row :gutter="10" style="display: flex; align-items: center">
          <el-col :span="6">
            <el-button size="mini" type="primary" plain @click="addJTInfo"
              >添加截图</el-button
            >
          </el-col>
          <el-col :span="18">
            添加位置截图时，系统将自动保存当前视角，请现将当前视角调整到合适为止
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-table
          :data="billboardModelJTList"
          style="width: 100%; border: 1px solid rgb(81 102 111 / 37%)"
          height="100%"
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column prop="jtName" label="截图名称"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="downloadimg(scope.row)"
                type="text"
                size="small"
                style="color: aqua"
                >下载</el-button
              >
              <el-button
                @click="updateZtBillboardJt(scope.row)"
                type="text"
                size="small"
                style="color: aqua"
                >修改名称</el-button
              >
              <el-button
                @click="deleteBillardJT(scope.row)"
                type="text"
                size="small"
                style="color: aqua"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer height="50px">
        <!-- :hide-on-single-page="true" -->
        <el-pagination
          style="color: white"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryParams.pageSize"
          layout="prev, pager, next"
          :total="queryParams.total"
        >
        </el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import {
  listZtBillboardJt,
  addZtBillboardJt,
  updateZtBillboardJt,
  delZtBillboardJt,
} from "@/api/zt/ztApi.js";
import { v4 as uuidv4 } from "uuid";
export default {
  data() {
    return {
      billboardModelJTList: [],
      loading: false,
      queryParams: {
        total: 0,
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    layerid: {
      type: String,
      default: "",
    },
    lydata: {
      type: Object,
      default: () => {
        return {};
      },
    },
    lyoption: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mounted() {
    this.getZtBillboardJtList();
  },
  methods: {
    //页大小触发
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.getZtBillboardJtList();
    },
    //跳转页触发
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getZtBillboardJtList();
    },

    /**
     * 获取广告截图信息
     */
    async getZtBillboardJtList() {
      debugger;
      this.loading = true;
      let dataList = await listZtBillboardJt({
        modelid: this.info.id,
        ...this.queryParams,
      });
      this.loading = false;
      this.queryParams.total = dataList.total;
      this.billboardModelJTList = dataList.rows;
    },

    /**
     * 添加截图
     */
    addJTInfo() {
      let that = this;
      debugger;
      var promise = scene.outputSceneToFile();
      Cesium.when(promise, function (base64data) {
        if (!that.info.id) {
          that.$message({
            message: "未读取到广告牌信息，请关闭窗口后重试",
            type: "warning",
          });
          return;
        }

        that
          .$prompt("请输入截图名称", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /\S/,
            inputErrorMessage: "请输入截图名称",
          })
          .then(async ({ value }) => {
            var form = { id: "", modelid: "", jtName: "", jtBase: "" };
            form.id = uuidv4();
            form.modelid = that.info.id;
            form.jtName = value;
            form.jtBase = base64data;

            let result = await addZtBillboardJt(form);
            if (result.code) {
              that.getZtBillboardJtList(that.info.id);
              that.$message({
                message: "添加成功",
                type: "success",
              });
            }
          })
          .catch(() => {});
      });
    },
    /**
     * 编辑截图名称
     */
    updateZtBillboardJt(row) {
      let that = this;
      this.$prompt("请输入截图名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "请输入截图名称",
        inputValue: row.jtName,
      })
        .then(async ({ value }) => {
          var form = { id: "", jtName: "" };
          form.id = row.id;
          form.jtName = value;

          let result = await updateZtBillboardJt(form);
          if (result.code) {
            that.getZtBillboardJtList(that.info.id);
            that.$message({
              message: "修改成功",
              type: "success",
            });
          }
        })
        .catch(() => {});
    },
    /*
     *删除广告牌
     */
    deleteBillardJT(model) {
      debugger;

      var that = this;
      var confirmid = that.$layer.confirm(
        "确定要删除当前截图, 是否继续?",
        {},
        async function () {
          that.$layer.close(confirmid);
          debugger;
          let result = await delZtBillboardJt(model.id);
          debugger;
          if (result.code == 200) {
            that.getZtBillboardJtList(that.info.id);
            that.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            that.getZtBillboardJtList(that.info.id);
            that.$message({
              message: "删除失败",
              type: "error",
            });
          }
        },
        function () {
          return;
        }
      );

      // var that = this;
      // this.$confirm("确定要删除当前截图, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(async () => {
      //     debugger;
      //     let result = await delZtBillboardJt(model.id);
      //     debugger;
      //     if (result.code == 200) {
      //       that.getZtBillboardJtList(that.info.id);
      //       that.$message({
      //         message: "删除成功",
      //         type: "success",
      //       });
      //     }
      //   })
      //   .catch(() => {
      //     debugger;
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });
    },

    /**
     * 根据图片生成画布
     */
    convertImageToCanvas(image) {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
    },
    /**
     * 下载图片
     */
    downloadimg(row) {
      let that = this;
      var image = new Image();
      image.src = row.jtBase;
      image.onload = function () {
        var canvas = that.convertImageToCanvas(image);
        var url = canvas.toDataURL("image/jpeg");
        var a = document.createElement("a");
        var event = new MouseEvent("click");
        a.download = new Date().getTime() + ".jpg"; // 指定下载图片的名称
        a.href = url;
        a.dispatchEvent(event); // 触发超链接的点击事件
      };
    },
  },
};
</script>
<style lang="scss">
@import "@/../../zt.scss";
</style>
<style scoped></style>