Changes

package.json

@@ -32,7 +32,9 @@
     "screenfull": "^5.1.0",
     "v-viewer": "^1.6.4",
     "vue": "2.6.10",
+    "vue-dragscroll": "^4.0.4",
     "vue-echarts": "^6.5.1",
+    "vue-pdf": "^4.3.0",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },

public/static/config.json

@@ -274,5 +274,33 @@
     "坐标(经度)": 128.164473,
     "坐标(纬度)": 42.493832,
     "文件路径": "/牵引配电所/敦白主接线图/敦白配电所/长白山动车库配电所.PNG"
+  },
+  {
+    "名称": "铁岭西",
+    "文件路径": "/工区/01铁岭西运行工区-模型.pdf"
+  },
+  {
+    "名称": "四平东",
+    "文件路径": "/工区/02四平东运行工区-模型.pdf"
+  },
+  {
+    "名称": "长春",
+    "文件路径": "/工区/03长春运行工区-模型.pdf"
+  },
+  {
+    "名称": "德惠西",
+    "文件路径": "/工区/04德惠西运行工区-模型.pdf"
+  },
+  {
+    "名称": "吉林",
+    "文件路径": "/工区/05吉林运行工区-简洁版-模型.pdf"
+  },
+  {
+    "名称": "长白山",
+    "文件路径": "/工区/06长白山运行工区-简洁版-模型.pdf"
+  },
+  {
+    "名称": "延吉西",
+    "文件路径": "/工区/07延吉西运行工区-简洁版-模型.pdf"
   }
 ]

src/views/dashboard-screen/chart-map/chartMap.vue

@@ -53,6 +53,8 @@ export default {
           const findConfig = this.config.find(item => item['名称'] === name)
           if (findConfig && (renderType === 1 || renderType === 2)) {
             this.loadImage(findConfig['文件路径'])
+          } else if (findConfig && renderType === 0) {
+            this.loadPDF(findConfig['文件路径'])
           }
         })
         console.log('data', data)
@@ -68,13 +70,19 @@ export default {
 
     loadImage(path) {
       console.log('loadImage', path)
-      if(!this.imgViewer?.isShown){
+      if (!this.imgViewer?.isShown) {
+        this.imgViewer = this.$viewerApi({
+          images: [`/static${path}`],
+        })
+      }
+    },
+    loadPDF(path) {
+      console.log('loadImage', path)
+      if (!this.imgViewer?.isShown) {
         this.imgViewer = this.$viewerApi({
           images: [`/static${path}`],
         })
       }
-
-
     }
   }
 }

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

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <button class="btn btn-sm btn-secondary" @click='zoom += 20'>
+      <i class="mdi mdi-magnify-plus-outline"></i>
+      放大
+    </button>
+
+    <button class="btn btn-sm btn-secondary"  @click='zoom -= 20'>
+      <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>
+    </div>
+  </div>
+</template>
+
+<script>
+import pdf from 'vue-pdf'
+import {dragscroll} from 'vue-dragscroll'
+
+export default {
+  name: "pdfViewer",
+  directives: {dragscroll},
+  components: {pdf},
+  data() {
+    return {zoom: 200}
+  },
+  created() {
+    window['pdfIs'] = this;
+  }
+}
+</script>
+
+<style lang='scss'>
+.pdf-viewer-wrapper {
+  overflow: hidden;
+  max-height: 90vh;
+
+  &.zoom-active {
+    cursor: grab;
+  }
+}
+</style>