1、风险四色分布图

src/views/energyOperationSupport/components/securitys/riskDistributionPic.vue

@@ -0,0 +1,103 @@
+<template>
+  <div ref="imgWrap" @mousewheel.prevent="rollImg" class="left">
+  <img class="img" ref="img" src="../../../../assets/img/img/riskDistributionPic.svg" alt="" @mousedown="moveImg"
+        :style="{transform:'scale('+multiples+')'}">
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'riskDistributionPic',
+    data() {
+      return {
+        multiples: 1,
+      };
+    },
+    created() {
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+      moveImg (e) {
+          e.preventDefault()
+        // 获取元素
+        let imgWrap = this.$refs.imgWrap
+        let img = this.$refs.img
+        let x = e.pageX - img.offsetLeft
+        let y = e.pageY - img.offsetTop
+        // 添加鼠标移动事件
+        imgWrap.addEventListener('mousemove', move)
+        function move (e) {
+          img.style.left = e.pageX - x + 'px'
+          img.style.top = e.pageY - y + 'px'
+        }
+        // 添加鼠标抬起事件，鼠标抬起，将事件移除
+        img.addEventListener('mouseup', () => {
+          imgWrap.removeEventListener('mousemove', move)
+        })
+        // 鼠标离开父级元素，把事件移除
+        imgWrap.addEventListener('mouseout', () => {
+          imgWrap.removeEventListener('mousemove', move)
+        })
+      },
+      // 滚轮滑动
+      rollImg(e) {
+        let direction = e.deltaY > 0 ? 'down' : 'up'
+        if (direction === 'up') {
+          // 滑轮向上滚动
+          if (this.multiples >= 99) {
+            return;
+          }
+          this.multiples += 0.25;
+        } else {
+          // 滑轮向下滚动
+          if (this.multiples <= 1) {
+            return;
+          }
+          this.multiples -= 0.25;
+        }
+      },
+      toBIgChange() {
+        if (this.multiples >= 2) {
+          return;
+        }
+        this.multiples += 0.25;
+      },
+      // 缩小
+      toSmallChange() {
+        if (this.multiples <= 1) {
+          return;
+        }
+        this.multiples -= 0.25;
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .left {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      padding: 20px;
+      float: left;
+      overflow: hidden;
+  }
+  .img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 5px;
+      left: 7px;
+      .rightulliimg {
+        max-width: 100%;
+        max-height: 1024px;
+      }
+      cursor: move;
+  }
+</style>

src/views/energyOperationSupport/router/index.js

@@ -51,7 +51,9 @@ import SecurityFilePic from '../components/securitys/SecurityFilePic.vue'
 // 安全文件一览图
 import pic from '../components/securitys/pic.vue'
 // 安全文件一览图
-import pic1 from '../components/securitys/pic1.vue'
+import pic1 from '../components/securitys/pic1.vue'
+// 安全文件一览图
+import riskDistributionPic from '../components/securitys/riskDistributionPic.vue'
 
 Vue.use(Router)
 
@@ -183,6 +185,11 @@ export default new Router({
                 path: 'pic1',
                 name: 'pic1',
                 component: pic1
+            },
+            {
+                path: 'riskDistributionPic',
+                name: 'riskDistributionPic',
+                component: riskDistributionPic
             }
         ]
     }]