up

backstage/src/components/ww-card/index.vue

@@ -12,6 +12,10 @@ export default {
 }
 </script>
 <style scoped>
+.theme-color1{
+  width: 130px;
+  word-break: break-all;
+}
 .ww-layout{
   width:100%;
   height:200px;

backstage/src/pages/content/scene/componets/detail.vue

@@ -3,62 +3,105 @@
     <div class="formtop">
       <div class="left">
         <el-form-item label="场景名称：" prop="name">
-          <el-input placeholder="请输入场景名称" :maxlength="INPUTLENGTH" show-word-limit
-            v-model="form.name"></el-input>
+          <el-input
+            placeholder="请输入场景名称"
+            :maxlength="INPUTLENGTH"
+            show-word-limit
+            v-model="form.name"
+          ></el-input>
         </el-form-item>
 
         <el-form-item label="场景类型：" prop="type">
           <el-input v-model="form.type" class="fadeDom"></el-input>
-          <el-select v-model="form.type" placeholder="请选择" style="width:100%">
-            <el-option v-for="item in sceneTypes" :key="item.id" :label="item.name" :value="item.id">
+          <el-select
+            v-model="form.type"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in sceneTypes"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
 
-        <el-form-item v-if="form.type=='temp'" label="展览时间：" prop="opening">
+        <el-form-item
+          v-if="form.type == 'temp'"
+          label="展览时间："
+          prop="opening"
+        >
           <el-input v-model="form.type" class="fadeDom"></el-input>
-          <el-date-picker type="datetimerange" 
-            style="width:100%;"
+          <el-date-picker
+            type="datetimerange"
+            style="width: 100%"
             size="large"
             format="yyyy 年 MM 月 dd 日 HH:mm:ss"
-            value-format='yyyy-MM-dd HH:mm:ss'
-           :picker-options="pickerOptions" range-separator="-"
-            start-placeholder="开始日期" end-placeholder="结束日期" v-model="form.opening" align="center">
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :picker-options="pickerOptions"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            v-model="form.opening"
+            align="center"
+          >
           </el-date-picker>
         </el-form-item>
 
         <el-form-item label="所属博物馆：" prop="museumId">
           <el-input v-model="form.museumId" class="fadeDom"></el-input>
-          <el-select v-model="form.museumId" placeholder="请选择" style="width:100%">
-            <el-option v-for="item in museumList" :key="item.id" :label="item.name" :value="item.id">
+          <el-select
+            @change="changeSelect"
+            v-model="form.museumId"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in museumList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
 
         <el-form-item label="封面图片：" prop="thumb">
-          <uploadThumb :data="{type:'thumb'}" :url="thumbUrl" @update="data=>{form.thumb = data}" :thumb="form.thumb" />
+          <uploadThumb
+            :data="{ type: 'thumb' }"
+            :url="thumbUrl"
+            @update="
+              (data) => {
+                form.thumb = data;
+              }
+            "
+            :thumb="form.thumb"
+          />
         </el-form-item>
 
         <el-form-item label="描述：">
-          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.description"  maxlength="200" show-word-limit></el-input>
+          <el-input
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            v-model="form.description"
+            maxlength="200"
+            show-word-limit
+          ></el-input>
         </el-form-item>
       </div>
-
     </div>
-
-
   </div>
 </template>
 
 <script>
-
 import uploadThumb from "@/components/uploadThumb";
 
-import {getMuseumAllList} from "@/configue/api";
-
+import { getMuseumAllList } from "@/configue/api";
 
 export default {
-  name:'sceneEdit',
+  name: "sceneEdit",
   props: ["data", "rule", "roleList"],
   components: { uploadThumb },
   data() {
@@ -67,50 +110,59 @@ export default {
       form: this.data,
       radio: "选中且禁用",
       thumbUrl: this.$serverName + "cms/exhibition/upload",
-      sceneTypes: [{
-        id: 'long',
-        name: '常设展览'
-      }, {
-        id: 'temp',
-        name: '临时展览'
-      }],
-      museumList:[],
+      sceneTypes: [
+        {
+          id: "long",
+          name: "常设展览",
+        },
+        {
+          id: "temp",
+          name: "临时展览",
+        },
+      ],
+      museumList: [],
       pickerOptions: {
-        shortcuts: [{
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
       },
     };
   },
   methods: {
-
+    changeSelect(val) {
+      this.form.cityId = this.museumList.find((v) => v.id === val).cityId;
+    },
   },
   mounted() {
-    getMuseumAllList((res)=>{
-      this.museumList = res.data
-    })
+    getMuseumAllList((res) => {
+      this.museumList = res.data;
+    });
   },
 };
 </script>
@@ -126,7 +178,7 @@ export default {
     justify-content: flex-start;
     position: relative;
 
-    >div {
+    > div {
       width: 40%;
 
       &:first-of-type {
@@ -142,7 +194,7 @@ export default {
 </style>
 
 <style lang="less">
-.el-date-editor .el-range-input{
+.el-date-editor .el-range-input {
   width: 49%;
 }
 </style>

backstage/src/pages/content/scene/data.js

@@ -37,6 +37,7 @@ let formKey = {
     "timeEnd": "",
     "timeStart": "",
     "type": "",
+    "cityId":"",
     opening:'',
     thumb:'',
     description:''

code/src/components/showCollection/showCollection.vue

@@ -1,12 +1,20 @@
 <template>
   <div v-if="cItem.entity">
     <div class="img-body">
-      <img class="close" @click.stop="hideBroadcast" :src="require(`@/assets/images/icon/close.png`)" />
+      <img
+        class="close"
+        @click.stop="hideBroadcast"
+        :src="require(`@/assets/images/icon/close.png`)"
+      />
 
       <template v-if="cItem.entity.type == 'img'">
         <div class="swcon swiper-container" id="imglist">
           <ul class="swiper-wrapper">
-            <li class="swiper-slide" v-for="(sub, index) in cItem.file" :key="index">
+            <li
+              class="swiper-slide"
+              v-for="(sub, index) in cItem.file"
+              :key="index"
+            >
               <div class="sl-item">
                 <img :src="sub.filePath" />
                 <p>{{ cItem.entity.name }}</p>
@@ -15,84 +23,114 @@
           </ul>
         </div>
         <template v-if="cItem.file.length > 1">
-          <img class="vpagination left" :src="require('@/assets/images/icon/left.png')" @click="slide('slidePrev')"
-            alt="" />
-          <img class="vpagination right" :src="require('@/assets/images/icon/right.png')" @click="slide('slideNext')"
-            alt="" />
+          <img
+            class="vpagination left"
+            :src="require('@/assets/images/icon/left.png')"
+            @click="slide('slidePrev')"
+            alt=""
+          />
+          <img
+            class="vpagination right"
+            :src="require('@/assets/images/icon/right.png')"
+            @click="slide('slideNext')"
+            alt=""
+          />
         </template>
         <ul class="pagna" v-if="cItem.file.length > 1">
-          <li v-for="(sub, i) in cItem.file" :class="{ active: i == active }" :key="i"></li>
+          <li
+            v-for="(sub, i) in cItem.file"
+            :class="{ active: i == active }"
+            :key="i"
+          ></li>
         </ul>
       </template>
 
       <template v-else>
-        <iframe v-if="cItem.entity.type == 'model'" :src="`/model-page/model.html?m=${cItem.entity.filePath}`"
-          frameborder="0"></iframe>
-        <video ref="itemvideo" controlslist="nodownload noplaybackrate" :disablePictureInPicture="true"
-          v-else-if="cItem.entity.type == 'video'" controls :src="cItem.entity.filePath" loop autoplay></video>
-
-        <vAudio v-else  :adata="cItem.entity" ></vAudio>
-        <p v-if="cItem.entity.type != 'audio'" class="btmname">{{ cItem.entity.name }}</p>
+        <iframe
+          v-if="cItem.entity.type == 'model'"
+          :src="`/model-page/model.html?m=${cItem.entity.filePath}`"
+          frameborder="0"
+        ></iframe>
+        <video
+          ref="itemvideo"
+          controlslist="nodownload noplaybackrate"
+          :disablePictureInPicture="true"
+          v-else-if="cItem.entity.type == 'video'"
+          controls
+          :src="cItem.entity.filePath"
+          loop
+          autoplay
+        ></video>
+
+        <vAudio v-else :adata="cItem.entity"></vAudio>
+        <p v-if="cItem.entity.type != 'audio'" class="btmname">
+          {{ cItem.entity.name }}
+        </p>
       </template>
     </div>
   </div>
 </template>
 <script>
 import emitter from "@/mitt/index";
-import vAudio from '@/components/Audio'
+import vAudio from "@/components/Audio";
 
 export default {
+  name: "showCollection",
   props: ["item", "zhuti"],
   data() {
     return {
       isFull: false,
       active: 0,
-      swInstance: null
+      swInstance: null,
     };
   },
   components: { vAudio },
   computed: {
     cItem() {
-      return { ...this.item }
-    }
+      return { ...this.item };
+    },
   },
   watch: {
     isFull(newVal) {
       let tmp = this.cItem.type == "img";
       this.$emit("hideSlide", tmp && !newVal);
     },
+    // "swInstance.activeIndex"(val) {
+    //   this.active = val;
+    //   console.log("----------", val);
+    // },
   },
   methods: {
     slide(type) {
       this.swInstance[type]();
     },
     hideBroadcast() {
-      emitter.emit('closeCollection')
-    }
+      emitter.emit("closeCollection");
+    },
   },
   mounted() {
-    let that = this
+    let that = this;
     this.$nextTick(() => {
       let t = setTimeout(() => {
         clearTimeout(t);
         this.swInstance = new Swiper("#imglist", {
           slidesPerView: "auto",
+          normalizeSlideIndex: false,
           on: {
-            slideChangeTransitionEnd() {
+            slideChange() {
               that.active = this.realIndex;
+              if (this.realIndex > that.cItem.file.length - 1)
+                that.active = that.cItem.file.length - 1;
             },
           },
         });
-        console.log(this.swInstance);
-      },200);
-    })
+      }, 200);
+    });
   },
-
 };
 </script>
 
 <style lang="scss" scoped>
-
 .img-body {
   width: 100%;
   height: 100%;
@@ -154,7 +192,7 @@ export default {
           height: 95%;
           position: relative;
 
-          >img {
+          > img {
             width: auto;
             max-height: 90vh;
             max-width: 100%;
@@ -165,7 +203,7 @@ export default {
             transform: translate(-50%, -50%);
           }
 
-          >p {
+          > p {
             color: #fff;
             position: absolute;
             bottom: 30px;
@@ -186,7 +224,7 @@ export default {
     text-align: center;
     z-index: 999;
 
-    >li {
+    > li {
       width: 10px;
       border-radius: 50%;
       height: 10px;
@@ -268,179 +306,178 @@ export default {
 
 @media screen and (max-width: 1000px) {
   .img-body {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  color: #fff;
-
-  iframe,
-  audio,
-  video {
     width: 100%;
-    height: 80%;
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-    position: absolute;
-  }
+    height: 100%;
+    position: relative;
+    color: #fff;
 
-  audio {
-    width: 50%;
-    height: 20%;
-  }
+    iframe,
+    audio,
+    video {
+      width: 100%;
+      height: 80%;
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 50%;
+      position: absolute;
+    }
 
-  .btmname {
-    transform: translateX(-50%);
-    bottom: 30px;
-    left: 50%;
-    position: absolute;
-    font-size: 24px;
-  }
+    audio {
+      width: 50%;
+      height: 20%;
+    }
 
-  .close {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    width: 30px;
-    height: 30px;
-    cursor: pointer;
-    z-index: 999999;
-  }
+    .btmname {
+      transform: translateX(-50%);
+      bottom: 30px;
+      left: 50%;
+      position: absolute;
+      font-size: 24px;
+    }
 
-  .swcon {
-    position: relative;
-    width: 100%;
-    height: 100%;
+    .close {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+      z-index: 999999;
+    }
 
-    .swiper-wrapper {
-      padding: 0;
+    .swcon {
+      position: relative;
       width: 100%;
+      height: 100%;
 
-      .swiper-slide {
+      .swiper-wrapper {
+        padding: 0;
         width: 100%;
-        transform-style: preserve-3d;
-        position: relative;
-        height: 100%;
-        margin: 0 auto;
-        transform: translate3d(0, 0, 0);
 
-        .sl-item {
+        .swiper-slide {
           width: 100%;
-          height: 95%;
+          transform-style: preserve-3d;
           position: relative;
-
-          >img {
-            width: auto;
-            max-height: 90vh;
-            max-width: 100%;
-            cursor: pointer;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-          }
-
-          >p {
-            color: #fff;
-            position: absolute;
-            bottom: 30px;
-            transform: translateX(-50%);
-            left: 50%;
-            font-size: 24px;
+          height: 100%;
+          margin: 0 auto;
+          transform: translate3d(0, 0, 0);
+
+          .sl-item {
+            width: 100%;
+            height: 95%;
+            position: relative;
+
+            > img {
+              width: auto;
+              max-height: 90vh;
+              max-width: 100%;
+              cursor: pointer;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+            }
+
+            > p {
+              color: #fff;
+              position: absolute;
+              bottom: 30px;
+              transform: translateX(-50%);
+              left: 50%;
+              font-size: 24px;
+            }
           }
         }
       }
     }
-  }
-
-  .pagna {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    z-index: 999;
-
-    >li {
-      width: 10px;
-      border-radius: 50%;
-      height: 10px;
-      background: rgba(51, 143, 123, 0.24);
-      display: inline-block;
-      margin: 0 4px;
 
-      &.active {
-        background: #338f7b;
+    .pagna {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+      z-index: 999;
+
+      > li {
+        width: 10px;
+        border-radius: 50%;
+        height: 10px;
+        background: rgba(51, 143, 123, 0.24);
+        display: inline-block;
+        margin: 0 4px;
+
+        &.active {
+          background: #338f7b;
+        }
       }
     }
-  }
 
-  .vpagination {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    width: 50px;
-    display: none;
-  }
+    .vpagination {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+      width: 50px;
+      display: none;
+    }
 
-  $pos: 180px;
+    $pos: 180px;
 
-  .left {
-    left: $pos;
-  }
+    .left {
+      left: $pos;
+    }
 
-  .right {
-    right: $pos;
+    .right {
+      right: $pos;
+    }
   }
-}
-
-.full {
-  width: 100%;
-  height: 100%;
-  z-index: 99999999;
-  position: relative;
 
-  iframe,
-  video {
+  .full {
     width: 100%;
     height: 100%;
-  }
+    z-index: 99999999;
+    position: relative;
 
-  .conname {
-    color: #fff;
-    margin-top: 6px;
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 40px;
-    font-size: 18px;
-  }
+    iframe,
+    video {
+      width: 100%;
+      height: 100%;
+    }
 
-  .img {
-    height: 100%;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
+    .conname {
+      color: #fff;
+      margin-top: 6px;
+      position: fixed;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 40px;
+      font-size: 18px;
+    }
 
-  .full-btn {
-    width: 30px;
-    position: absolute;
-    right: 12px;
-    bottom: 30px;
-    cursor: pointer;
-  }
+    .img {
+      height: 100%;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
 
-  .full-close {
-    width: 30px;
-    position: absolute;
-    right: 12px;
-    top: 30px;
-    cursor: pointer;
+    .full-btn {
+      width: 30px;
+      position: absolute;
+      right: 12px;
+      bottom: 30px;
+      cursor: pointer;
+    }
+
+    .full-close {
+      width: 30px;
+      position: absolute;
+      right: 12px;
+      top: 30px;
+      cursor: pointer;
+    }
   }
 }
-}
-
 </style>

code/src/views/exhibition/exhibition/collections.vue

@@ -20,7 +20,7 @@
           </template>
         </ui-select>
 
-        <ui-search v-model="searchKey" :placeholder="'请输入藏品名称'"></ui-search>
+        <ui-search v-model="searchKey" :placeholder="'请输入藏品名称1'"></ui-search>
       </div>
 
       <div class="sright">