对话框修改及接口新增

src/App.vue

@@ -16,4 +16,73 @@ export default  {
         }
     }
 }
+/*禁止缩放*/
+window.addEventListener('mousewheel', function(event){
+  if (event.ctrlKey === true || event.metaKey) {
+    event.preventDefault();
+  }
+},{ passive: false});
+
+//firefox
+window.addEventListener('DOMMouseScroll', function(event){
+  if (event.ctrlKey === true || event.metaKey) {
+    event.preventDefault();
+  }
+},{ passive: false});
+//+_
+window.onload = function() {
+  document.addEventListener('keydown', function (event) {
+    if ((event.ctrlKey === true || event.metaKey === true)
+      && (event.which === 61 || event.which === 107
+        || event.which === 173 || event.which === 109
+        || event.which === 187  || event.which === 189))
+    {
+      event.preventDefault();
+    }
+  }, false);
+}
 </script>
+
+<style lang="scss">
+/*本月日期数字*/
+.el-picker-panel{
+  color: #00F6EC;
+}
+.el-date-table td.available:hover{
+  color: #06131f;
+}
+/*面板上方按钮*/
+.el-picker-panel__icon-btn{
+  color: #00F6EC;
+}
+.el-picker-panel__icon-btn:hover{
+  color: #06131f;
+}
+/*面板上方显示日期*/
+.el-date-picker__header-label{
+  color: #00F6EC;
+}
+.el-date-picker__header-label:hover {
+  color: #06131f;
+}
+/*周一至周日文字及下划线*/
+.el-date-table th{
+  color: #00F6EC;
+  border-bottom: solid 1px #00F6EC;
+}
+/*面板背景色*/
+.el-picker-panel.el-date-picker {
+  background-color: rgba(53, 141, 141, 0.59);
+}
+/*选中日期颜色*/
+.el-date-table td.current:not(.disabled) span{
+  background-color: #00F6EC;
+}
+.popper__arrow{
+  border-bottom-color: #00F6EC !important;
+}
+.popper__arrow::after {
+  border-bottom-color: rgba(53, 141, 141, 0.59) !important;
+}
+
+</style>

src/api/zcustom/air.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-// 查询摄像头列表
+// 修改空调水浸数量
 export function update(num) {
   return request({
     url: '/large/third/updateAirNum',
@@ -8,3 +8,11 @@ export function update(num) {
     data: num
   })
 }
+
+// 修改空调水浸数量
+export function getNum() {
+  return request({
+    url: '/large/third/getAirNum',
+    method: 'get'
+  })
+}

src/views/screen/engineering/issueDealDia.vue

@@ -0,0 +1,263 @@
+<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">反馈资料清单：</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 placeholder="请输入标题" style="margin-bottom: 20px;width: 220px"></el-input>
+        </div>
+
+        <el-input 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;border-radius: 8px;color: #00ffff;position: relative;font-size: 45px;display: flex;align-items: center;border: 1px solid #00ffff4d;">
+          <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>
+
+        <div style="margin-bottom: 20px;color: #00ffff80;font-family: PingFangSC-Regular;font-weight: 400;font-size: 14px;">支持.docx、.xlsx格式</div>
+
+        <el-button style="width: 100px;margin-top: 10px;margin-right: 10px;border: 1px solid #00FFFF;border-radius: 2px;">提交</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 { getFoodsList } from "@/api/screen/service";
+import pinyin from "../data/pinyin.js";
+
+export default {
+  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
+    },
+    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__suffix{
+  color: #00F6EC;
+}
+::v-deep .el-input__inner::placeholder{
+  color: #199294;
+}
+::v-deep .el-textarea__inner::placeholder{
+  color: #199294;
+}
+</style>
+
+

src/views/screen/engineering/issueListDia.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="myDia">
-    <div style="margin-bottom: 10px;display: flex;position: relative;width: 100%">
+    <div style="margin-bottom: 26px;display: flex;position: relative;width: 100%">
       <el-date-picker
         v-model="value"
         type="date"
@@ -9,24 +9,32 @@
       <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>
-      <i class="el-icon-circle-close" style="position: absolute;right: 10px;color: #00ffff;font-size: 25px;cursor: pointer" @click="close"></i>
+      <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">时间</div>
-        <div class="flex-column">标题</div>
-        <div class="flex-column">问题内容</div>
-        <div class="flex-column">发起人</div>
-        <div class="flex-column">问题状态</div>
-        <div class="flex-column">操作</div>
+        <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 dataList" :key="index" @click="choose()">
-        <div class="flex-column">{{item.a}}</div>
-        <div class="flex-column">{{item.b}}</div>
-        <div class="flex-column">{{item.c}}</div>
-        <div class="flex-column">{{item.d}}</div>
-        <div class="flex-column">{{item.e}}</div>
-        <div class="flex-column">{{item.f}}</div>
+      <div class="flex-row" v-for="(item,index) in dataList" :key="index">
+        <div class="flex-column" style="width: 15%">{{item.a}}</div>
+        <div class="flex-column" style="width: 15%">{{item.b}}</div>
+        <div class="flex-column" style="width: 30%">{{item.c}}</div>
+        <div class="flex-column" style="width: 15%">{{item.d}}</div>
+        <div class="flex-column" style="width: 10%">
+          <span v-if="item.e === 1"><span style="color: #67C23A">●</span> 已完结</span>
+          <span v-if="item.e === 0"><span style="color: #FAAD14">●</span> 处理中</span>
+        </div>
+        <div class="flex-column" style="width: 15%">
+          <span v-if="item.e === 1"></span>
+          <span v-if="item.e === 0" style="color: #00FFFF;cursor: pointer" @click="deal()">变更状态</span>
+        </div>
       </div>
     </div>
     <div style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 10px;">
@@ -50,14 +58,11 @@ export default {
     return {
       value:"2020-02-09",
       dataList:[
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
-        {a:1,b:1,c:1,d:1,f:1,e:1},
+        {a:"2024/12/28",b:"施工整改问题1",c:"施工整改问题具体内容",d:"张三",e:1},
+        {a:"2024/12/28",b:"施工整改问题1",c:"施工整改问题具体内容",d:"张三",e:1},
+        {a:"2024/12/28",b:"施工整改问题1",c:"施工整改问题具体内容",d:"张三",e:0},
+        {a:"2024/12/28",b:"施工整改问题1",c:"施工整改问题具体内容",d:"张三",e:1},
+        {a:"2024/12/28",b:"施工整改问题1",c:"施工整改问题具体内容",d:"张三",e:1},
       ]
     };
   },
@@ -67,6 +72,10 @@ export default {
       this.$emit("subIssue");
     },
 
+    deal(){
+      this.$emit("dealIssue");
+    },
+
     close() {
       this.$emit("close");
     },
@@ -84,6 +93,9 @@ export default {
 
 .flex-container {
   width: 100%;
+  height: 566px;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
 }
 
 .header{
@@ -103,11 +115,13 @@ export default {
   border-left: 2px #00FFFF solid;
   position: absolute;
   left: 0;
-  top: 10px
+  top: 15px
 }
 
 .flex-column {
-  flex: 1;  /* 每列均分可用空间 */
+  display: flex;
+  justify-content: center;
+  height: 46px;
   padding: 8px 12px;
   text-align: left;  /* 左对齐文本 */
   color: white;
@@ -117,70 +131,6 @@ export default {
   color: #00ffff;
 }
 
-.table-cont{
-  width:100%;
-
-  .table-top{
-    width:100%;
-    height: 26px;
-    background: url("../../../assets/images/building_guarantee/img_11.png") no-repeat;
-    background-size: 100% 100%;
-    padding:0 4px 0 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size:14px;
-    color:#00FFFF;
-  }
-  .table-bot{
-    width:100%;
-    height: 300px;
-    overflow: auto;
-    .table-list{
-      margin-bottom: 10px;
-      align-items: center;
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(21, 105, 107, 0.54) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      width:100%;
-      height:30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size:14px;
-      color:#FFFFFF;
-      font-weight: 500;
-    }
-    .table-list:hover{
-      background: radial-gradient(
-          190% 71% at 50% 49%,
-          rgba(47, 204, 208, 0.74) 0%,
-          rgba(27, 95, 97, 0) 100%
-      );
-      cursor: pointer;
-    }
-  }
-  .table-bot::-webkit-scrollbar {
-    display: none; /* 隐藏滚动条 */
-  }
-
-  .fir{
-    width:40%;
-    text-align: left;
-    display: flex;
-  }
-  .snd{
-    width:30%;
-    text-align: left;
-  }
-  .thd{
-    width:30%;
-    text-align: left;
-  }
-}
-
 .el-scrollbar {
   background: #15696b;
   border: 1px solid #00ffff;
@@ -202,15 +152,16 @@ export default {
   display: none;
 }
 .myDia{
-  padding-top: 5px;
-  width: 668px;
-  height: 432px;
-  box-shadow: 0 0 15px 5px rgba(21, 105, 107, 1); /* 发光效果 */
+  width: 1221px;
+  height: 739px;
+  padding: 24px 35px ;
+  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-input__prefix{
   color: #00F6EC;

src/views/screen/engineering/main.vue

@@ -196,6 +196,7 @@
           v-if="showIssue === 1"
           @close="onCloseIssue"
           @subIssue="onSubIssue"
+          @dealIssue="onDealIssue"
           :monitorInfo="this.monitorInfo">
         </issue-list-dia>
         <issue-sub-dia
@@ -203,6 +204,11 @@
           @close="onCloseIssueSub"
           :monitorInfo="this.monitorInfo">
         </issue-sub-dia>
+        <issue-deal-dia
+          v-if="showIssueDeal === 1"
+          @close="onCloseIssueDeal"
+          :monitorInfo="this.monitorInfo">
+        </issue-deal-dia>
       </div>
     </div>
 <!--    弹出层-->
@@ -226,6 +232,7 @@
 
 <script>
 import IssueSubDia from './issueSubDia.vue'
+import IssueDealDia from './issueDealDia.vue'
 import CameraScreen from './cameraScreen.vue'
 import IssueListDia from "./issueListDia.vue"
 import ProjectCameraDia from "./projectCameraDia.vue";
@@ -257,6 +264,7 @@ export default {
     CarHealth, ResourceList, CarCost,
     CarStockDialog, CarWarningDialog, TerminalDataDialog,
     IssueSubDia,
+    IssueDealDia,
     CameraScreen,
     IssueListDia,
     ProjectCameraDia,
@@ -310,6 +318,7 @@ export default {
       showC:false,
       showIssue:0,
       showIssueSub:0,
+      showIssueDeal:0,
       showCameraScreen:0,
       showCamera:0,
       showProject:0,
@@ -498,6 +507,10 @@ export default {
       this.showIssueSub = 1
       this.showIssue = 0
     },
+    onDealIssue(){
+      this.showIssueDeal = 1
+      this.showIssue = 0
+    },
     onCloseIssueSub(){
       this.showIssueSub = 0
       if (this.flag === 1){
@@ -511,6 +524,10 @@ export default {
       }
       this.flag = 0
     },
+    onCloseIssueDeal() {
+      this.showIssueDeal = 0
+      this.showIssue = 1
+    },
 
 
 

src/views/zcustom/air/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { update } from '@/api/zcustom/air'
+import { getNum, update } from '@/api/zcustom/air'
 
 export default {
   data() {
@@ -7,6 +7,13 @@ export default {
       num: 0
     }
   },
+  mounted() {
+    getNum().then(response => {
+        if (response.code === 200){
+          this.num = response.data
+        }
+    })
+  },
   methods:{
     update(){
       update(this.num).then(response => {