项目详情增加视频切换功能

yanzhu-bigscreen/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
+    "serve:prod": "vue-cli-service serve --mode production",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

yanzhu-bigscreen/src/views/index.vue

@@ -15,7 +15,6 @@ export default {
         this.$bus.$on('projectChange', prj => {
             this.selProject = prj;
         });        
-        this.$router.push("/detail");
     }
 }
 </script>

yanzhu-bigscreen/src/views/projectDetail.vue

@@ -202,12 +202,6 @@
             </el-col>
             <el-col :span="12" class="h100">
                 <module-one-2-2 label="" class="no-title no-border">
-                    <div v-autoscroll="20" style="height: 100px; overflow: hidden;" v-if="1 == 2">
-                        <svg-icon icon-class="money"></svg-icon>
-                        <div v-for="(it, idx) in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="idx">
-                            {{ it }}
-                        </div>
-                    </div>
                     <div>
                     </div>
                     <div class="modify-project-amount" @mouseout="costMouseout" @mouseover="costMouseover">
@@ -280,7 +274,8 @@
                                                 计划开工日期
                                             </p>
                                             <div>
-                                                <span class="led-number">{{ selProject.scheduledStartTime | toDate }}</span>
+                                                <span class="led-number">{{ selProject.scheduledStartTime | toDate
+                                                    }}</span>
                                             </div>
                                         </div>
                                     </div>
@@ -295,7 +290,8 @@
                                                 计划竣工日期
                                             </p>
                                             <div>
-                                                <span class="led-number">{{ selProject.plannedCompletionTime | toDate }}</span>
+                                                <span class="led-number">{{ selProject.plannedCompletionTime | toDate
+                                                    }}</span>
                                             </div>
                                         </div>
                                     </div>
@@ -309,7 +305,8 @@
                                                 实际开工日期
                                             </p>
                                             <div>
-                                                <span class="led-number">{{ selProject.actualOperatingTime | toDate }}</span>
+                                                <span class="led-number">{{ selProject.actualOperatingTime | toDate
+                                                    }}</span>
                                             </div>
                                         </div>
                                     </div>
@@ -351,11 +348,23 @@
                         </div>
                     </div>
                     <div class="prj-img-list">
-                        <el-carousel height="100%" :autoplay="false">
+                        <span class="prj-img-nav" v-if="showImgVideo">
+                            <span class="prj-img-nav-item" :class="imgVideoSel == 1 ? 'is-active' : ''"
+                                @click="imgVideoSel = 1">效果图</span>
+                            <span class="prj-img-nav-item" :class="imgVideoSel == 2 ? 'is-active' : ''"
+                                @click="imgVideoSel = 2">视频</span>
+                        </span>
+                        <el-carousel height="100%" :autoplay="false" v-if="imgVideoSel == 1">
                             <el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
                                 <el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
                             </el-carousel-item>
                         </el-carousel>
+                        <div class="prj-video-layout" v-if="imgVideoSel == 2">
+                            <video class="prj-video">
+                                <source :src="prjVideo" type="video/mp4" />
+                                您的浏览器不支持Video标签。
+                            </video>
+                        </div>
                     </div>
                 </module-one-2-2>
                 <module-one-1-2 label="项目节点计划预警" class="prj-plan">
@@ -524,6 +533,9 @@ export default {
             deptType5: [],//检测单位
             deptType6: [],//勘察单位
             prjImgs: [],
+            prjVideo: null,
+            showImgVideo: false,
+            imgVideoSel: 1,
             attendanceNav: 0,
             attendanceTotal: 0,
             attendanceData: [
@@ -592,6 +604,9 @@ export default {
                     return objs.length > 0 ? objs[0] : null;
                 };
                 this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(",").filter(d => d);
+                this.prjVideo = this.prjInfo?.setting?.orgVideo || '';
+                this.showImgVideo = this.prjImgs.length > 0 && this.prjVideo;
+                this.imgVideoSel = 1;
                 this.deptType1 = func('建设单位');
                 this.deptType2 = func('设计单位');
                 this.deptType3 = { deptName: this.prjInfo.disDeptName, leader: this.prjInfo.projectPerson, phone: this.prjInfo.projectPersonPhone };
@@ -850,6 +865,36 @@ export default {
 
     .prj-img-list {
         height: calc(100% - 130px);
+        position: relative;
+
+        .prj-img-nav {
+            position: absolute;
+            z-index: 999;
+
+            .prj-img-nav-item {
+                display: inline-block;
+                line-height: 30px;
+                height: 30px;
+                width: 90px;
+                text-align: center;
+                background-color: #192c648a;
+                border: solid 1px #1e90ff8a;
+                color: #ccc;
+                cursor: pointer;
+
+                &.is-active {
+                    background-color: #50a2eb8a;
+                    color: #fff;
+                }
+            }
+        }
+
+        .prj-video-layout {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            justify-items: center;
+        }
 
         .el-carousel {
             height: 100%;
@@ -1117,6 +1162,16 @@ export default {
         .prj-img-list {
             height: calc(100% - 150px);
 
+            .prj-img-nav {
+                .prj-img-nav-item {
+                    line-height: 40px;
+                    height: 40px;
+                    width: 110px;
+                    font-size: 18px;
+
+                }
+            }
+
             .el-carousel {
                 height: 100%;
 
@@ -1399,7 +1454,14 @@ export default {
 
         .prj-img-list {
             height: calc(100% - 190px);
-
+            .prj-img-nav {
+                .prj-img-nav-item {
+                    line-height: 60px;
+                    height: 60px;
+                    width: 130px;
+                    font-size: 30px;
+                }
+            }
             .el-carousel {
                 height: 100%;
 

yanzhu-bigscreen/vue.config.js

@@ -17,14 +17,22 @@ module.exports = defineConfig({
       // https://cn.vitejs.dev/config/#server-proxy
       "/dev-api": {
         target: "http://localhost:8080",        
-        //target: 'http://62.234.3.186/prod-api/',
         changeOrigin: true,
         pathRewrite: {
           "^/dev-api": "/",
         },
       },
+      "/prod-api": {
+        //target: "http://localhost:8080",
+        target: 'http://62.234.3.186/prod-api/',
+        changeOrigin: true,
+        pathRewrite: {
+          "^/prod-api": "/",
+        },
+      },
       "/xd/": {
-        target: "http://localhost/xd",
+        //target: "http://localhost/xd",
+        target: 'http://62.234.3.186/xd/',
         changeOrigin: true,
         pathRewrite: {
           "^/xd/": "/",
@@ -45,7 +53,8 @@ module.exports = defineConfig({
         },
       },
       "/statics/": {
-        target: `http://localhost:9300/statics/`,
+        //target: `http://localhost:9300/statics/`,
+        target: `http://62.234.3.186/statics/`,
         changeOrigin: true,
         pathRewrite: {
           "^/statics/": "/",