新增视频播放和样式调整

hookehuyr
Commit 35b4437c6e997b5f36d9a641444a336bea742cea 35b4437c 1 parent 3ea88596
Showing 6 changed files with 155 additions and 38 deletions
package-lock.json
package.json
src/common/tiantan_v2.js
src/main.js
src/views/index.vue
yarn.lock
--- a/package-lock.json
View file @35b4437
+++ b/package-lock.json
View file @35b4437
--- a/package.json
View file @35b4437
+++ b/package.json
View file @35b4437
@@ -12,11 +12,13 @@
     "cypress:open": "cypress open"
   },
   "dependencies": {
+    "@videojs-player/vue": "^1.0.0",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vueuse/core": "^8.5.0",
     "animate.css": "^4.1.1",
     "dayjs": "^1.11.3",
     "default-passive-events": "^2.0.0",
+    "font-awesome": "^4.7.0",
     "global": "^4.4.0",
     "html2canvas": "^1.4.1",
     "jquery": "^3.6.0",
@@ -30,6 +32,7 @@
     "uuid": "^8.3.2",
     "vant": "^4.0.0-alpha.3",
     "vconsole": "^3.14.6",
+    "video.js": "^8.3.0",
     "vite-plugin-dynamic-import": "^0.9.6",
     "vite-plugin-mp": "^1.6.1",
     "vue": "^3.2.36",
--- a/src/common/tiantan_v2.js
View file @35b4437
+++ b/src/common/tiantan_v2.js
View file @35b4437
@@ -109,6 +109,41 @@ var spotInfo = [
     position: [120.585948, 31.315095],
     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
   },
+  {
+    name: '罗汉堂',
+    position: [120.58764, 31.315011],
+    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+    note: `与观音殿遥相呼应的是罗汉堂，位于大雄宝殿西侧。西园寺罗汉堂为中国四大古罗汉堂之一。
+
+    西园罗汉堂创建于明末，咸丰时即倾颓于战火。现仅存第一进石拱门的圆框及左右门券石，雕刻精美，为明代遗物，历经岁月摩娑，光泽内敛。如今，我们只能从遗物的精美雕刻，遥想旧时沧桑及这一不复存在的胜迹。现有的罗汉堂，为同治、光绪年间陆续重葺。屋宇深广，共三进四十八间。整体建筑呈田字形布局，中心雕塑周围有小天井四座，给幽深曲折的殿堂提供了良好的通风和采光条件。
+
+    从空中俯瞰，罗汉堂黛瓦覆顶，组成一个汉字的“田”字。象征在佛教里僧宝，是一切世间供养、布施、修福的无上福田，五百罗汉则是贤圣僧的代表。
+
+
+    除了俯瞰的“田”字，在罗汉堂地下，还有一项隐秘而巧妙的设计——西边放生池的水源经过罗汉堂地下隐秘水道弯曲绕行，流经罗汉堂，最终汇聚到大雄宝殿露台前的香花桥下。这不仅让西园寺内基础水池串联成一片活水，更重要和巧妙地解决了罗汉堂内的湿度调节问题。因五百罗汉为泥胎雕塑，过于干燥的空气将会造成古老的泥塑造像干裂、风化、剥落等一系列问题，而地下隐暗水道的设计，则有效保证罗汉堂内的湿度能控制在一定范围内。于此，不得不叹服先人的智慧。
+
+    罗汉堂原有的建筑较为低矮，不仅光线昏暗、空气浑浊，而且年深日久，梁柱有不同程度的老旧腐化。一九九七年七月，寺院对罗汉堂进行了全面整修，历时半年。在落架大修过程中，既遵照文物修旧如旧的原则，又以创新的精神，适应形势发展的需要，大胆将罗汉堂屋顶升高六十厘米，并加了斗拱，既利于文物的保护，又极大改善了罗汉堂采光环境，使整个罗汉堂显得美观大方，吸引了众多的信众前来瞻礼，使古寺焕发出崭新的光彩，成为名副其实的吴中胜地。`
+  },
+  {
+    name: '大雄宝殿',
+    position: [120.587249, 31.314722],
+    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+    note: `大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
+
+    大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
+
+    檐枋悬有三块匾额，中门之上为“西乾应迹”匾额。西者西方，乾者天也，西乾即是指佛教的发源地古印度，因当时地处中国的西方而得名，相应地，中国则被称为东土。应迹谓应化垂迹，即佛、菩萨应众生之机缘而将其本体示现种种身以济度众生。
+
+    东门上为“焰网庄严”匾额，出处为《药师经》第二大愿：“身善能安住，焰网庄严，过于日月”,即所谓“药师如来琉璃光,焰网庄严无等伦”，形容的是东方药师佛世界；西门上为“光寿无量”匾额，是“无量寿、无量光”的意思，意指西方阿弥陀佛光寿无量。“三个匾额”与殿内供奉的“横世三佛”内外呼应。与“西乾应迹”相呼应的中间一尊佛像是释迦摩尼佛，大迦叶尊者与阿难尊者分立两侧；与“焰网庄严”相呼应的则是药师佛，位于东侧；与“光寿无量”相呼应的则是阿弥陀佛，位于西侧。几尊佛像均是香樟木雕刻，是现存不多的清时期极具代表性的大型木雕造像。三尊佛像下莲花座、金刚须弥座雕刻精美、令人叹为观止。
+
+    大殿内有三副抱柱楹联，外侧上联为“东震涌庄严，看桥通鹤市，山近虎丘，招提久占三吴胜”；下联为“西来参本意，任侠士流芳，生公说法，照澈都归五蕴空”。“鹤市”，阖闾女亡，出殡时，鹤舞于阊门，后以鹤市代指阊门。“生公说法”，是指南北朝的高僧竺道生在虎丘山上说法，最后顽石也点头赞同的典故。后有题记：“乙丑（1925）春仲，郡人许人俊谨题”。
+
+    内侧有两副，内外上联为“宝相瞻大雄，象法禅机垂正觉”；下联为“劳生来小息，鱼音梵呗涤尘烦”；“余姚黄雨斋撰立，江东浦泳谨书”。
+
+    内中上联为“海国启琳宫，宏法利生扬正教”；下联为“灵山闻妙谛，觉迷度苦感仁王”；“弟子夏士魁长发头陀敬献，江东浦泳谨书”。
+
+    两副对联均作于民国三十三年（1944），其中“感仁王”三字年久剥落，1985年浦泳老先生重游西园寺，见字残缺，说“趁我有生之年，把字补好”。不久果寄来字样，重修时已把字补上，亦可告慰于浦老矣！`
+  },
 ];
 var toiletInfo = [
--- a/src/main.js
View file @35b4437
+++ b/src/main.js
View file @35b4437
@@ -2,8 +2,8 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-29 22:00:37
+ * @LastEditTime: 2023-05-30 13:12:21
- * @FilePath: /tswj/src/main.js
+ * @FilePath: /map-demo/src/main.js
  * @Description:
  */
 import { createApp } from 'vue';
@@ -14,6 +14,10 @@ import App from './App.vue';
 import axios from '@/utils/axios';
 // import 'default-passive-events'; // 解决Chrome控制台non-passive event listener输出问题
 import { createPinia } from 'pinia';
+import 'font-awesome/css/font-awesome.min.css';
+
+import VueVideoPlayer from '@videojs-player/vue';
+import 'video.js/dist/video-js.css';
 const pinia = createPinia();
 const app = createApp(App);
@@ -22,4 +26,6 @@ app.config.globalProperties.$http = axios; // 关键语句
 app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider);
+app.use(VueVideoPlayer)
+
 app.mount('#app');
--- a/src/views/index.vue
View file @35b4437
+++ b/src/views/index.vue
View file @35b4437
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-05-29 18:12:10
+ * @LastEditTime: 2023-05-30 13:45:04
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
   <div style="height: 100vh; position: relative;">
     <div id="container"></div>
-    <div class="input-card">
-      <!-- <div class="input-item">
-        <span @click="showPublic" class="btn">显示公共设施</span>
-        <span @click="hidePublic" class="btn">隐藏公共设施</span>
-      </div> -->
-      <!-- <div class="input-item">
-        <button class="btn" @click="addLayer" style="margin-right:1rem;">添加图层</button>
-        <button class="btn" @click="removeLayer">删除图层</button>
-      </div> -->
-      <div class="input-item">
-        <!-- <button class="btn" @click="setLocation" style="margin-right:1rem;">定位服务</button>
-        <button class="btn" @click="addLocation" style="margin-right:1rem;">添加定位路线</button>
-        <button class="btn" @click="removeLocation" style="margin-right:1rem;">删除定位路线</button> -->
-        <button class="btn" @click="setTitleLayer" style="margin-right:1rem;">添加贴片</button>
-      </div>
-      <div class="input-item">
-        <button class="btn" @click="setWalkRoute" style="margin-right:1rem;">步行导航</button>
-        <button class="btn" @click="removeWalkRoute" style="margin-right:1rem;">移除步行导航</button>
-      </div>
-    </div>
     <div class="nav-bar-wrapper">
       <van-row>
         <van-col span="8" :class="[isActive === 0 ? 'checked' : '', 'item']" @click="setNavLayer(0)">
-          <van-icon name="shop-o" size="1.25rem" /><br/>
+          <van-icon name="shop-o" size="1.25rem" /><br />
           <span style="font-size: 0.85rem;">景区信息</span>
         </van-col>
         <van-col span="8" :class="[isActive === 1 ? 'checked' : '', 'item']" @click="setNavLayer(1)">
-          <van-icon name="shop-o" size="1.25rem" /><br/>
+          <van-icon name="shop-o" size="1.25rem" /><br />
           <span style="font-size: 0.85rem;">卫生间</span>
         </van-col>
         <van-col span="8" :class="[isActive === 2 ? 'checked' : '', 'item']" @click="setNavLayer(2)">
-          <van-icon name="shop-o" size="1.25rem" /><br/>
+          <van-icon name="shop-o" size="1.25rem" /><br />
           <span style="font-size: 0.85rem;">活动中心</span>
         </van-col>
       </van-row>
@@ -49,12 +29,42 @@
       <span v-else @click="handleSafeRoute(false)">关闭安全路线</span>
     </div>
     <div class="tool-bar-wrapper">
+      <div style="display: flex; flex-direction: column;align-items: center;justify-content: center;">
         <van-icon name="plus" style="margin-bottom: 1rem;" @click="setZoom('plus')" />
         <van-icon name="minus" style="margin-bottom: 1rem;" @click="setZoom('minus')" />
         <van-icon name="aim" @click="setLocation" />
       </div>
-    <van-popup v-model:show="show_popup" position="bottom" :overlay="false" closeable
+    </div>
-      :style="{ padding: '64px' }">内容</van-popup>
+    <div class="operate-bar-wrapper">
+      <div class="box-wrapper">
+        <div class="item" @click="setTitleLayer">
+          <i class="fa fa-cube"></i><br />
+          贴片
+        </div>
+        <div v-if="show_walk_route" class="item" @click="setWalkRoute">
+          <i class="fa fa-eye"></i><br />
+          步行
+        </div>
+        <div v-else class="item" @click="removeWalkRoute">
+          <i class="fa fa-eye-slash"></i><br />
+          步行
+        </div>
+      </div>
+    </div>
+    <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem' }">
+      <van-icon name="cross" @click="show_popup = false" style="float: right; color: gray;" />
+      <div class="popup-wrapper">
+        <div class="title">
+          {{ popup_title }}
+        </div>
+        <div class="content" v-html="popup_content">
+        </div>
+        <video-player ref="videoPlayer" style="width: 100%; height: 10rem;"
+          poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
+          :src="video_src"
+          class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
+      </div>
+    </van-popup>
     <van-dialog v-model:show="dialog_show" title="温馨提示">
       <div style="padding: 1rem; text-align: center;">您不在景区范围内</div>
@@ -68,6 +78,7 @@
 import coord from '@/common/tiantan_v2'
 // import AMap from 'AMap'
 import _ from 'lodash';
+import $ from 'jquery';
 const GPS = {
   PI: 3.14159265358979324,
@@ -168,7 +179,11 @@ export default {
       toolBar: '',
       isActive: 0,
       safe_route: [],
-      open_safe_route: true
+      open_safe_route: true,
+      show_walk_route: true,
+      popup_title: '',
+      popup_content: '',
+      video_src: ''
     }
   },
   mounted() {
@@ -183,6 +198,17 @@ export default {
     // 打开贴片地图
     // this.setTitleLayer()
   },
+  watch: {
+    show_popup(val) {
+      if (!val) {
+        this.$nextTick(() => {
+          // 弹框关闭时，暂停视频
+          $('.vjs-tech')[0].pause();
+          $('.vjs-tech')[0].currentTime = 0;
+        })
+      }
+    }
+  },
   methods: {
     // addMarker () {
     //   // axios.get('http://api.map.baidu.com/location/ip?ak=CzpAXV4bhyqCKnWpQqLRkS1i&coor=bd09ll')
@@ -480,7 +506,11 @@ export default {
         }
         // 绑定景点的点击事件 - 文字出现才能触发
         var clickListener = marker.on('click', (e) => {
-          infoWindow.open(this.map);
+          // infoWindow.open(this.map);
+          this.show_popup = true;
+          this.popup_title = x.name;
+          this.popup_content = x.note;
+          this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
         })
         //
         this.spotInfo.push(marker);
@@ -660,7 +690,7 @@ export default {
         })
       });
     },
-    setZoom (type) { // 设置放大缩小地图
+    setZoom(type) { // 设置放大缩小地图
       const zoom = this.map.getZoom();
       if (type === 'plus') {
         this.map.setZoom(zoom + 1)
@@ -718,7 +748,7 @@ export default {
       var layer = new AMap.TileLayer.Flexible({
         cacheSize: 30,
         opacity: 1,
-        zIndex: 2,
+        zIndex: 100,
         createTile: function (x, y, z, success, fail) {
           // if ((x + y) % 3) {
           //   fail();
@@ -828,18 +858,20 @@ export default {
         }
       }
       AMap.plugin(["AMap.Walking"], () => { //加载步行导航插件
-        this.walk_route = new AMap.Walking ({
+        this.walk_route = new AMap.Walking({
           map: this.map,
         }); //构造步行导航类
         AMap.Event.addListener(this.walk_route, "complete", walking_CallBack); //返回导航查询结果
         //根据起、终点坐标规划步行路线
         this.walk_route.search(new AMap.LngLat(120.587799, 31.313276), new AMap.LngLat(120.587912, 31.315169));
       });
+      this.show_walk_route = false;
     },
-    removeWalkRoute () {
+    removeWalkRoute() {
-      this.walk_route.clear()
+      this.walk_route.clear();
+      this.show_walk_route = true;
     },
-    setNavLayer (index) { // 选择地图图层显示
+    setNavLayer(index) { // 选择地图图层显示
       this.isActive = index;
       if (index === 0) {
         this.setSpotLayer()
@@ -851,7 +883,7 @@ export default {
         this.setActivityLayer()
       }
     },
-    handleSafeRoute (status) { // 打开/关闭逃生路线线
+    handleSafeRoute(status) { // 打开/关闭逃生路线线
       if (status) {
         this.addSafeRoute()
         this.open_safe_route = false;
@@ -913,9 +945,10 @@ export default {
 .tool-bar-wrapper {
   position: absolute;
   left: 20px;
-  bottom: 40px;
+  bottom: 8rem;
   width: 20px;
 }
+
 .nav-bar-wrapper {
   position: absolute;
   top: 0;
@@ -925,17 +958,57 @@ export default {
   background-color: white;
   text-align: center;
   box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
+
   .item {
     padding-top: 0.5rem;
   }
+
   .checked {
     color: red;
   }
 }
+
 .safe-route-wrapper {
   position: absolute;
   bottom: 1rem;
   right: 1rem;
   background-color: white;
 }
+
+.operate-bar-wrapper {
+  position: absolute;
+  right: 20px;
+  top: 10%;
+  width: 20px;
+  height: auto;
+
+  .box-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .item {
+      text-align: center;
+      font-size: 0.85rem;
+      width: 2rem;
+      height: 2rem;
+      background-color: white;
+      margin-bottom: 1rem;
+      border-radius: 1px;
+      padding: 2.5px;
+    }
+  }
+}
+
+.popup-wrapper {
+  margin-top: 1rem;
+
+  .title {
+    font-size: 1.25rem;
+    margin-bottom: 0.85rem;
+  }
+
+  .content {}
+}
 </style>
--- a/yarn.lock
View file @35b4437
+++ b/yarn.lock
View file @35b4437