emm...

src/views/screen/engineering/issueSubDia.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="main-data data-weeks-foods">
+    <div v-if="dialogVisible" style="z-index: 10000;display: flex;justify-content: center;align-items: center;background-color: rgba(59,58,58,0.35);position: absolute;width: 100%;height: 100%">
+      <div style="display: flex;width: 400px;height: 320px;justify-content: center;align-items: center;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);position: relative;background-color: rgba(114,215,199,0.17);border-radius: 4px">
+        <i class="el-icon-circle-close" style="color: #00F6EC;position: absolute;right: 10px;top:10px;" @click="handleCloseView"></i>
+        <img width="300px" :src="dialogImageUrl" alt="">
+      </div>
+    </div>
+
     <div class="myTitle">问题上报</div>
     <div class="close-btn" @click="close"></div>
     <div class="me">
@@ -7,7 +14,8 @@
         <div style="text-align: right;margin-bottom: 10px;height: 32px;line-height: 32px">时间：</div>
         <div style="text-align: right;margin-bottom: 20px;height: 32px;line-height: 32px">问题：</div>
         <div style="text-align: right;margin-bottom: 145px;">问题内容：</div>
-        <div style="text-align: right">选项：</div>
+        <div style="text-align: right;margin-bottom: 13px">选项：</div>
+        <div style="text-align: right">附件：</div>
       </div>
       <div style="width: 65%;">
         <el-date-picker
@@ -16,11 +24,22 @@
           type="date"
           placeholder="选择日期">
         </el-date-picker>
-        <el-input placeholder="请输入内容" style="margin-bottom: 10px"></el-input>
-        <el-input type="textarea" :rows=8 placeholder="请输入内容" resize="none" style="margin-bottom: 10px"></el-input>
+        <el-input placeholder="请输入内容" style="margin-bottom: 10px;width: 220px"></el-input>
+        <el-input type="textarea" :rows=8 placeholder="请输入内容" resize="none" style="margin-bottom: 10px;width: 350px"></el-input>
         <el-checkbox v-model="check" @change="change">备选项1</el-checkbox>
         <el-checkbox v-model="checked" @change="changed" style="margin-right: 200px">备选项</el-checkbox>
-        <el-button style="width: 100px;margin-top: 10px">提交</el-button>
+        <div style="width: 130px;height: 130px;background: rgba(15, 86, 86, 0.54);margin-top: 10px;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">
+            <i class="el-icon-view" @click="handlePictureCardPreview"></i>
+            <i class="el-icon-delete" @click="handleRemove"></i>
+          </div>
+          <img width="100%" :src="dialogImageUrl" alt="">
+        </div>
+        <el-button style="width: 100px;margin-top: 10px;margin-right: 10px">提交</el-button>
+        <el-button style="width: 100px;margin-top: 10px;background: rgba(15, 86, 86, 0.54);color: #00ffff">取消</el-button>
       </div>
     </div>
   </div>
@@ -34,12 +53,45 @@ export default {
   name: "UnitCamera",
   data() {
     return {
+      fileFlag: false,
+      fileList: [],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false,
+      value:"2020-01-01",
       check:false,
       checked:false
     };
   },
   mounted() {},
   methods: {
+    triggerFileInput(){
+      this.$refs.fileInput.click();
+    },
+
+    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
     },
@@ -71,11 +123,20 @@ export default {
 .me::-webkit-scrollbar {
   display: none;
 }
-.said{
-  width: 2px;
-  margin-right: 8px;
-  height: 16px;
-  background-color: #00FFFF;
+.sth{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  font-size: 22px;
+  cursor: pointer;
+  opacity: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.sth:hover{
+  opacity: 1;
+  background: rgba(5, 28, 38, 0.58);
 }
 
 .el-scrollbar {
@@ -102,7 +163,7 @@ export default {
   position: relative;
   width: 668px;
   height: 432px;
-  background: rgba(59, 92, 119, 0.37) url("../../../assets/images/main/dialog-bg.png") no-repeat;
+  background: rgba(35, 60, 80, 0.37) url("../../../assets/images/main/dialog-bg.png") no-repeat;
   background-size: cover;
   .close-btn {
     position: absolute;
@@ -150,45 +211,6 @@ export default {
     }
   }
 
-  .content {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    .data-list {
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(21, 105, 107, 0.54) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      width: 100%;
-      height: 492px;
-      padding: 20px;
-      overflow: auto;
-      white-space: pre-wrap;
-      .data-item {
-        display: inline-block;
-        color: #00ffff;
-        font-weight: bold;
-        margin: 0 20px 20px 0;
-        font-size: 14px;
-        img {
-          width: 80px;
-          height: 80px;
-          object-fit: cover;
-        }
-        .name {
-          width: 80px;
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          text-align: center;
-        }
-      }
-    }
-  }
-
   .title-format {
     display: flex;
     flex-direction: row;
@@ -251,5 +273,45 @@ export default {
     // border-radius: 5px;
   }
 }
+
+::v-deep .el-input__inner{
+  color: #00ffff;
+  background-color: rgba(15, 86, 86, 0.54);
+}
+::v-deep .el-textarea__inner{
+  color: #00ffff;
+  background-color: rgba(15, 86, 86, 0.54);
+}
+::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>
 

src/views/screen/service/weekFoods.vue

@@ -62,7 +62,7 @@ export default {
       weeks: ["周一", "周二", "周三", "周四", "周五"],
       list: [],
       foodsList: [],
-   
+
       food: "早餐",
       foods: ["早餐", "中餐", "晚餐"],
       lists: [],
@@ -98,7 +98,7 @@ export default {
   if (foodsList.hasOwnProperty(day)) {
     const dayNumber = dayMap[day];
     transformedData[dayNumber] = [];
-    for (const mealTypeKey in foodsList[day]) { 
+    for (const mealTypeKey in foodsList[day]) {
       if (foodsList[day].hasOwnProperty(mealTypeKey)) {
         const mealTypeNumber = mealTypeMap[mealTypeKey];
         foodsList[day][mealTypeKey].forEach(meal => {
@@ -115,14 +115,14 @@ export default {
             this.foodsList=JSON.parse(JSON.stringify(transformedData))
            let index = parseInt(this.weeks.indexOf(this.$props.week)) + 1;
            let lists =JSON.parse(JSON.stringify(transformedData[index]));
-       
+
           this.lists = lists;
           // let list = foodsList[index];
           // this.list = list;
           //区分早中晚
           let list = [];
           let type = parseInt(this.foods.indexOf(this.food)) + 1;
-          let that = this;    
+          let that = this;
      // 用于存储所有的"name"字段及其对应的餐次编号
          lists.forEach((item) => {
             if (item.type == type) {
@@ -148,13 +148,13 @@ export default {
 
     //选择菜品
     changeFoods(e) {
-      let type = parseInt(this.foods.indexOf(e)) + 1;   
+      let type = parseInt(this.foods.indexOf(e)) + 1;
       let lists = this.lists;
       let list = [];
       let that = this;
-      lists.forEach((item) => {     
-        
-        if (item.type == type) { 
+      lists.forEach((item) => {
+
+        if (item.type == type) {
           //处理图片
           that.loadImage(item);
           list.push(item);