feat: 增加 gis目录

package.json

@@ -35,6 +35,8 @@
     "vue-dragscroll": "^4.0.4",
     "vue-echarts": "^6.5.1",
     "vue-pdf": "^4.3.0",
+    "vue-pdf-app": "^2.1.0",
+    "vue-pdf-embed": "^1.1.5",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },

src/main.js

@@ -48,7 +48,8 @@ import JMultiSelectTag from './components/dict/index.js'
 import * as filters from './filters'
 import ELScrollbar from '@/components/ELScrollbar'
 import './icons/al/iconfont.css' // icon
-
+import VueDragscroll from 'vue-dragscroll'
+Vue.use(VueDragscroll)
 Vue.component('VChart', ECharts)
 Vue.use(Antd)
 Vue.use(JDictSelectTag)

src/views/dashboard-screen/screen/screen_Bd_Dl_Ycxx/pdfViewer.vue

@@ -1,47 +1,98 @@
 <template>
-  <div>
-    <button class="btn btn-sm btn-secondary" @click='zoom += 20'>
-      <i class="mdi mdi-magnify-plus-outline"></i>
-      放大
-    </button>
+  <div class="pdf-wrap">
+    <div class="actions">
+      <button class="btn btn-sm btn-secondary" @click="handleScale(+0.1)">
+        <i class="mdi mdi-magnify-plus-outline"/>
+        放大
+      </button>
 
-    <button class="btn btn-sm btn-secondary"  @click='zoom -= 20'>
-      <i class="mdi mdi-magnify-minus-outline">
-        缩小
+      <button class="btn btn-sm btn-secondary" @click="handleScale(-0.1)">
+        <i class="mdi mdi-magnify-minus-outline">
+          缩小
 
-      </i></button>
-    zoom：{{zoom}}
-
-    <div class='pdf-viewer-wrapper' v-dragscroll='true' :class='{"zoom-active": zoom > 100 }'>
-      <pdf ref="pdf" src="/static/工区/07延吉西运行工区-简洁版-模型.pdf" :style="'width=' + zoom + '%'"></pdf>
+        </i></button>
+    </div>
+    <div class="pdf-viewer-wrapper" v-dragscroll="true" :class="{zoomActive: scale > 1 }">
+      <pdf
+        v-if="render"
+        ref="pdf"
+        src="/static/工区/07延吉西运行工区-简洁版-模型.pdf"
+      />
+      <!--      <vue-pdf-embed ref="pdf" :scale="scale" source="/static/工区/07延吉西运行工区-简洁版-模型.pdf" />-->
+      <!--    <vue-pdf-app ref="pdf"  pdf="/static/7.pdf"></vue-pdf-app>-->
     </div>
   </div>
 </template>
 
 <script>
 import pdf from 'vue-pdf'
-import {dragscroll} from 'vue-dragscroll'
+import { dragscroll } from 'vue-dragscroll'
+import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed.js'
+import VuePdfApp from 'vue-pdf-app'
+import 'vue-pdf-app/dist/icons/main.css'
 
 export default {
-  name: "pdfViewer",
-  directives: {dragscroll},
-  components: {pdf},
+  name: 'PdfViewer',
+  directives: { dragscroll },
+  components: { pdf, VuePdfEmbed, VuePdfApp },
   data() {
-    return {zoom: 200}
+    return {
+      scale: 1,
+      render: true,
+      basicStyle: {
+        width: 0,
+        height: 0
+      },
+      toStyle: {
+        width: 0,
+        height: 0
+      }
+    }
   },
   created() {
-    window['pdfIs'] = this;
+    window['pdfIs'] = this
+  },
+  mounted() {
+    this.basicStyle = {
+      width: getComputedStyle(this.$refs.pdf.$el).width || 0,
+      height: getComputedStyle(this.$refs.pdf.$el).height || 0
+    }
+  },
+  methods: {
+    handleScale(num) {
+      this.scale += num
+      if (this.scale < 0) {
+        this.scale = 0
+      }
+      const style = this.basicStyle
+      const w = parseFloat(style.width?.replace('px', ''))
+      const h = parseFloat(style.height?.replace('px', ''))
+      this.toStyle = {
+        width: `${w * this.scale}px`,
+        height: `${h * this.scale}px`
+      }
+      this.$refs.pdf.$el.style.width = this.toStyle.width
+      this.$refs.pdf.$el.style.height = this.toStyle.height
+    }
   }
 }
 </script>
 
-<style lang='scss'>
-.pdf-viewer-wrapper {
+<style lang="scss">
+.pdf-wrap {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
-  max-height: 90vh;
 
-  &.zoom-active {
-    cursor: grab;
+  .pdf-viewer-wrapper {
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    overflow: auto;
+    &.zoomActive {
+      cursor: grab;
+    }
   }
 }
+
 </style>