湖里大屏(首页):视频和图片上传替换

src/store/index.js

@@ -45,8 +45,8 @@ export default new Vuex.Store({
         // UPLOADURL:'http://10.0.1.43:6023/upload/image',//测试
         // FILEURL:'http://10.0.1.43:6023/image/',//测试
         BASEURL: baseUrl?baseUrl:window.location.protocol + '//' + window.location.host + '/', //
-        UPLOADURL: window.location.protocol + '//' + window.location.host + '/upload/image', //
+        // UPLOADURL: window.location.protocol + '//' + window.location.host + '/upload/image', //
-        FILEURL: window.location.protocol + '//' + window.location.host + '/image/',//测试
+        // FILEURL: window.location.protocol + '//' + window.location.host + '/image/',//测试
         /* 2022-05-16 */
         // tag: 部署河南项目时，需要打开这两行代码
         // UPLOADURL: 'http://124.71.178.44:100/upload/image',
@@ -54,8 +54,8 @@ export default new Vuex.Store({
 
         /* 2022-06-06 */ // tag: 本地测试接口
         // BASEURL:'http://192.168.34.174:6023/',
-        // UPLOADURL: 'http://192.168.34.125:6023/upload/image',
+        UPLOADURL: 'http://192.168.34.125:6023/upload/image',
-        // FILEURL: 'http://192.168.34.125:6023/image/',
+        FILEURL: 'http://192.168.34.125:6023/image/',
         // UPLOADURL:'http://'+"61.190.32.219:9050"+'/upload/image',//正式
         // FILEURL:'http://'+"61.190.32.219:9050"+'/image/',//正式
         ACCOUNTTYPE: ['系统管理员', '企业一级管理员', '企业二级管理员', '企业三级管理员', '项目管理员'], //1系统管理员，2企业管理员账号，3企业区账号，4企业市账号，5项目账号

src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/videoPhoto.vue

@@ -2,20 +2,42 @@
   <!-- 视频宣传 -->
   <div class="videoPhoto">
     <div class="titleTxt">
-      <el-button type="text" class="video" @click="toVideo()">宣传视频</el-button>
+      <el-button type="text" :class="show? '' : 'changeCol'"  class="video" @click="toVideo()">宣传视频</el-button>
-      <el-button type="text" class="image" @click="toImage()">效果图</el-button>
+      <el-button type="text" :class="show? 'changeCol' : ''" class="image" @click="toImage()">效果图</el-button>
     </div>
-    <video v-if="!show" class="topInner videos" autoplay controls loop></video>
+    <video
-    <img
+      v-if="!show"
-      v-else
+      :src="$store.state.FILEURL + projectData.videoUrl"
-      style="height:85%;width:90%; margin-left:5%; margin-top:2%;"
+      class="topInner videos"
-      src="@/assets/images/projectImg/videoPic.png"
+      autoplay
-      alt
+      controls
-    />
+      loop
+    ></video>
+    <!-- src="@/assets/images/projectImg/videoPic.png" -->
 
-    <!-- 替换视频 -->
+    <!-- 初次上传视频 -->
-    <!-- v-if="projectData.videoUrl && optionListIndex == 1" -->
+    <div class="placeholderBox placeholderBox2" v-if="projectData.videoUrl == ''">
+      <img src="@/assets/images/noData3.png" alt srcset />
+      <p>
+        {{ $t('message.videoManage.empty') }},
+        <el-upload
+          style="display: inline-block"
+          class="upload-demo"
+          :action="$store.state.UPLOADURL"
+          :on-success="(file) => handleSuccess(file, 1)"
+          :on-error="(file) => handleError(file, 1)"
+          :beforeUpload="(file) => handleBeforeUpload(file, 1)"
+          name="files"
+          :show-file-list="false"
+        >
+          <!-- 点我上传 -->
+          <span>{{ $t('message.companyDiagram.uploadImg') }}</span>
+        </el-upload>
+      </p>
+    </div>
+    <!-- 更换视频 -->
     <el-upload
+      v-if="projectData.videoUrl"
       class="changeVideoBox"
       :src="$store.state.FILEURL + projectData.videoUrl"
       :action="$store.state.UPLOADURL"
@@ -25,25 +47,55 @@
       name="files"
       :show-file-list="false"
     >
-      <!-- 更换视频 -->
+      <span class="changeVideoBtn">{{ $t('message.companyDiagram.changeVideo') }}</span>
-      <span class="changeVideoBtn">
-        {{
-        $t('message.companyDiagram.changeVideo')
-        }}
-      </span>
     </el-upload>
+
+    <!-- 更换图片 -->
+    <div
+      @mouseenter="showChangeImg = true"
+      @mouseleave="showChangeImg = false"
+    >
+      <el-upload
+        v-if="showChangeImg"
+        style="position: absolute; left: 900px; top: 430px"
+        :action="$store.state.UPLOADURL"
+        :on-success="(file) => handleSuccessTwo(file, 1)"
+        :on-error="(file) => handleError(file, 1)"
+        :beforeUpload="(file) => handleBeforeUpload(file, 1)"
+        name="files"
+        :show-file-list="false"
+      >
+        <span
+          style="border: 1px solid #ffffff; padding: 5px"
+        >{{ $t('message.companyDiagram.changeImg') }}</span>
+      </el-upload>
+      <img
+      v-if="show"
+      class="imgStyle"
+      :src="fileUrl + imgUrl"
+      alt
+    />
+    </div>
   </div>
 </template>
 
 <script>
-import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
+import { getProjectDetail, editProjectInfo } from "@/assets/js/api/baseInfo.js";
+import {
+  queryBySnData,
+  eidtProjectShowConfig
+} from "@/assets/js/api/projectSummary.js";
 export default {
   data() {
     return {
       show: false,
       projectData: {
         videoUrl: ""
-      }
+      },
+      fileUrl: "",
+      imgUrl: "", //图片
+      showChangeImg: false, //显示隐藏更换图片
+      fullscreenLoading: null,
     };
   },
   props: {
@@ -53,7 +105,9 @@ export default {
     }
   },
   created() {
+    this.fileUrl = this.$store.state.FILEURL;
     this.getDataDateils();
+    this.getQueryBySnData();
   },
   methods: {
     toVideo() {
@@ -75,9 +129,83 @@ export default {
         }
       });
     },
-    handleSuccess() {},
+    // 获取图片
-    handleError() {},
+    getQueryBySnData() {
-    handleBeforeUpload() {}
+      queryBySnData({
+        projectSn: this.$store.state.projectSn,
+        showType: 3
+      }).then(res => {
+        this.imgUrl = res.result.configValue;
+      });
+    },
+    //效果图 保存
+    saveEffectData(url) {
+      // let configValue = JSON.stringify(url);
+      let data = {
+        projectSn: this.$store.state.projectSn,
+        showType: 3,
+        showTitle: this.$t("message.companyDiagram.resultImg"), //'效果图'
+        configValue: url
+      };
+      eidtProjectShowConfig(data).then(res => {
+        if (res.code == 200) {
+          this.getQueryBySnData();
+        }
+      });
+    },
+    //保存或删除宣传视频
+    saveOrDeleteVideo(url) {
+      editProjectInfo({
+        projectId: this.projectData.projectId,
+        videoUrl: url
+      }).then(res => {
+        this.$message.success(this.$t("message.companyDiagram.uploadSuccess")); //"上传成功"
+        this.projectData.videoUrl = url;
+      });
+    },
+    // 文件上传 之前
+    handleBeforeUpload(file, type) {
+      console.log(file);
+      let fileType = file.type.split("/")[0];
+      if (fileType == "video" || fileType == "image") {
+        this.fullscreenLoading = this.$loading({
+          lock: true,
+          text: this.$t("message.companyDiagram.uploadHint"), // "上传中，请稍等。。。"
+          spinner: "el-icon-loading",
+          background: "rgba(0, 0, 0, 0.7)"
+        });
+        return true;
+      } else {
+        this.$message.error(this.$t("message.companyDiagram.uploadHint2")); //"请选择正确的文件"
+        return false;
+      }
+    },
+    //上传失败
+    handleError(file, type) {
+      this.fullscreenLoading.close();
+      this.$message.error(this.$t("message.companyDiagram.uploadError")); //"上传失败，请重试"
+    },
+    //上传成功
+    handleSuccess(file, type) {
+      console.log("上传成功了吗", file);
+      if (file.code == 200 || file.status == "SUCCESS") {
+        console.log(file);
+        var url = file.data[0].imageUrl;
+        this.saveOrDeleteVideo(url);
+      }
+      this.fullscreenLoading.close();
+    },
+
+    handleSuccessTwo(file, type) {
+      if (file.code == 200 || file.status == "SUCCESS") {
+        console.log(file);
+        var url = file.data[0].imageUrl;
+        this.imgUrl = url;
+        console.log('--------',this.imgUrl)
+        this.saveEffectData(url);
+      }
+      this.fullscreenLoading.close();
+    }
   }
 };
 </script>
@@ -92,7 +220,10 @@ export default {
     font-size: 18px;
     color: #6ee4f0;
     margin-top: 5px;
-    margin-left: 5px;
+    margin-left: 10px;
+  }
+  .changeCol{
+    color:white;
   }
   .changeVideoBtn {
     border: 1px solid rgba(255, 255, 255, 0.5);
@@ -109,5 +240,10 @@ export default {
   .changeVideoBox:hover .changeVideoBtn {
     display: block;
   }
+  .imgStyle{
+    width:80%;
+    height: 80%;
+    margin-left: 10%;
+  }
 }
 </style>