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

<template>
  <div class="issueDia">
    <div style="width: 100%;height: 35px;margin-bottom: 20px;display: flex;justify-content: center">
      <img src="../../../assets/zhang/engineer/issueTitle.png">
      <div class="myTitle">问题上报</div>
      <div style=""></div>
      <div style="width: 20px;height: 20px;position: absolute;top: 5px;right: 15px" @click="close">
        <img src="../../../assets/zhang/engineer/ownCloseBtn.png">
      </div>
    </div>
    <div v-if="dialogVisible" style="z-index: 10000;display: flex;justify-content: center;align-items: center;background-color: transparent;position: absolute;width: 100%;height: 100%" @click="handleCloseView">
        <img width="600px" :src="dialogImageUrl" alt="">
    </div>


    <div class="me">
      <div style="width: 35%;color: #00ffff;">
<!--        <div style="text-align: right;margin-bottom: 10px;height: 32px;line-height: 32px">时间：</div>-->
        <div style="text-align: right;margin-bottom: 25px;height: 32px;line-height: 32px">标题：</div>
        <div style="text-align: right;margin-bottom: 125px;">内容：</div>
        <div style="text-align: right;margin-bottom: 125px;">整改要求：</div>
        <div style="text-align: right">截图附件：</div>
      </div>
      <div style="width: 65%;">
<!--        <el-date-picker
          style="margin-bottom: 10px"
          v-model="value"
          type="date"
          placeholder="选择日期">
        </el-date-picker>-->
        <div>
          <el-input v-model="title" placeholder="请输入标题" style="margin-bottom: 20px;width: 220px"></el-input>
        </div>

        <el-input v-model="description" type="textarea" :rows=6 placeholder="请输入内容" resize="none" style="margin-bottom: 20px;width: 350px"></el-input>

        <el-input v-model="need" type="textarea" :rows=6 placeholder="请输入整改要求" resize="none" style="margin-bottom: 20px;width: 350px"></el-input>

        <div style="width: 130px;height: 130px;background: rgba(15, 86, 86, 0.54);margin-bottom: 10px;mborder-radius: 4px;color: #00ffff;position: relative;font-size: 45px;display: flex;align-items: center">
          <i v-if="!fileFlag" class="el-icon-plus" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"></i>
          <input v-if="!fileFlag" type="file" ref="fileInput" @change="handleFileChange" style="display: none;position: absolute;left: -1000px"/>
          <div v-if="!fileFlag" @click="triggerFileInput" style="width: 100%;height: 100%;cursor: pointer;position: absolute;"></div>
          <div class="sth" v-if="fileFlag">
            <div style="width: 0;height: 0;border-left: 30px solid transparent;border-top: 30px solid #000000;position: absolute;top: 0;right: 0">
            </div>
            <div class="close-icon" @click="handleRemove"></div>
            <div style="width: 100%;height: 50%">
              <div style="width: 100%;height: 50%;display: flex;justify-content: center;align-items: start">
                <i class="el-icon-view" @click="handlePictureCardPreview"></i>
              </div>
              <div style="width: 100%;height: 50%;display: flex;justify-content: center;color: #00FFFF;font-size: 14px;align-items: end">预览</div>
            </div>
          </div>
          <img width="100%" :src="dialogImageUrl" v-if="fileFlag" style="height: 100%;object-fit: cover;">
        </div>
        <el-button style="width: 100px;margin-top: 10px;margin-right: 10px;border: 1px solid #00FFFF;border-radius: 2px;" @click="add">提交</el-button>
        <el-button style="width: 100px;margin-top: 10px;background: rgba(15, 86, 86, 0.54);color: #00ffff;border: 1px solid #00FFFF;border-radius: 2px;">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { add } from "@/api/screen/service";
import pinyin from "../data/pinyin.js";

export default {
  name: "UnitCamera",
  props: {
    imgUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      title:'',
      description:'',
      need:'',
      fileFlag: false,
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      value:"2020-01-01",
      check:false,
      checked:false
    };
  },
  mounted() {},
  mounted() {
    this.dialogImageUrl = this.imgUrl
},
  methods: {
    triggerFileInput(){
      this.$refs.fileInput.click();
    },
    add() {
       alert(this.imgUrl)
      return
      const issueData = {
        title:this.title,
        description:this.description,
        need:this.need,
        projectId:'',
        delFlag: 0,
        file:this.dialogImageUrl,
        status: 0,
      };
      add(issueData).then((res) => {
        if (Number(res.code) === 200) {
          this.close();
        }
      }).catch((err) => {
        console.error("提交失败：", err);
      });
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        this.fileFlag = true
        const reader = new FileReader();
        reader.onload = (e) => {
          this.dialogImageUrl = e.target.result; // base64 编码的图片 URL
        };
        reader.readAsDataURL(file); // 读取文件并转换为 base64 格式
        console.log(this.dialogImageUrl)
      }
    },
    handleRemove() {
      this.fileFlag = false
      this.dialogImageUrl = ''
    },
    handlePictureCardPreview() {
      this.dialogVisible = true;
    },
    handleCloseView() {
      this.dialogVisible = false;
    },

    change(){
      this.checked = !this.check
    },
    changed(){
      this.check = !this.checked
    },
    choose(){
      this.$emit("choose");
    },

    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.close-icon {
  position: absolute;
  right: 2px;
  top: 3px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.close-icon::before,
.close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background-color: #00FFFF;
  transform-origin: center;
  transform: translate(-50%, -50%);
}

.close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg); /* 旋转 45 度 */
}

.close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg); /* 旋转 -45 度 */
}

.myTitle{
  color: #00F6EC;
  font-size: 16px;
  position: absolute;
  left: 40px;
  top: 6px;
}
.me{
  display: flex;flex-wrap: wrap;justify-content: space-around;height: 100%;overflow: auto;
}
.me::-webkit-scrollbar {
  display: none;
}
.sth{
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 22px;
  cursor: pointer;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  transition: background-color 0.5s ease;
}
.sth:hover{
  opacity: 1;
  background: rgba(5, 28, 38, 0.58);
}

.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;
}
.issueDia {
  position: relative;
  width: 640px;
  height: 708px;
  background-size: cover;

  background-image: radial-gradient(circle at 50% 50%, #031417b3 0%, #0C1A1A 84%);
}

::v-deep .el-input__inner{
  color: #00ffff;
  background-color: rgba(15, 86, 86, 0.54);
  border: 1px solid #00ffff4d;
}
::v-deep .el-textarea__inner{
  color: #00ffff;
  background-color: rgba(15, 86, 86, 0.54);
  border: 1px solid #00ffff4d;
}
::v-deep .el-button{
  font-weight: bold;
  color: rgba(2, 24, 24, 0.71);
  background-color: #00ffff;
}
::v-deep .el-checkbox__inner{
  background-color: #15696b;
}
::v-deep .is-checked .el-checkbox__inner{
  color: #00ffff;
  background-color: #00ffff;
}
::v-deep .el-checkbox__inner::after{
  border-color: rgba(2, 24, 24, 0.71);
  border-width: 2px;
}
::v-deep .el-checkbox__label{
  color: #15696b;
}
::v-deep .is-checked .el-checkbox__label{
  color: #00ffff;
}
::v-deep .el-input__prefix{
  color: #00F6EC;
}
::v-deep .el-input__inner::placeholder{
  color: #199294;
}
::v-deep .el-textarea__inner::placeholder{
  color: #199294;
}
</style>